Btukfyl

I can not order my different div as I wish.

First, I would like the card to be the same height as my title.
Then, I want the bottom of my 2 buttons are at the same height as the bottom of my card.

I guess this is possible but I'm stuck ... Could you help me?

<div class="container" style="width:auto;margin-top:0%">

    <div class="row col-12">

        <div class="5" style="margin-top:2%"><h3>Change your user profile</h3></div>

        <div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">

            <div class="card-header" style="font-size:22px">Attention</div>

            <div class="card-body">

                <p class="card-text">

                    The modified data must first be validated. <br /><br />

                    A request will be sent as soon as you click on "Submit". <br /><br />

                    It is normal that the old data is still displayed, it means that the validation has not been done yet.

                </p>

            </div>

        </div>

        <div>

            <button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>

            <button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>

        </div>

    </div>

[

You should remove the margin-left:51% given to your card as you do not need margins when working with bootstrap grid. Also, you should move the buttons into the same first column container in order to align them along with the title.

<div class="container" style="width:auto;margin-top:0%">

<div class="row col-12">

   <div class="col-5" style="margin-top:2%">

      <h3>Change your user profile</h3>

      <div>

         <button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>

         <button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>

      </div>

   </div>

   <div class="card border-primary md-5 col-6" style="width: auto;">

      <div class="card-header" style="font-size:22px">Attention</div>

      <div class="card-body">

         <p class="card-text">

            The modified data must first be validated. <br /><br />

            A request will be sent as soon as you click on "Submit". <br /><br />

            It is normal that the old data is still displayed, it means that the validation has not been done yet.

         </p>

      </div>

   </div>

</div>

Also, I would highly recommend removing inline styles and using CSS classes instead.

Working fiddle here: http://jsfiddle.net/omxahu46/

Hope this helps.