2 blocks of different heights in one row

Question

How to make the blocks be at the same level (since they are at the same level on the lower side) without setting the static height and without floats

body .mid-wrapper .mid-container { width: 100%; text-align: center; } body .mid-wrapper .mid-container .block-container { display: inline-block; text-align: -webkit-center; width: 40%; } body .mid-wrapper .mid-container .block-container .block-img { min-height: 160px; } body .mid-wrapper .mid-container .block-container .block-header { font-weight: bold; padding-bottom: 20px; } body .mid-wrapper .mid-container .block-container .block-text { text-align: left; width: 70%; } body .mid-wrapper .mid-container .block-container .btn-main span { left: 36%; } img{width:100px;height:100px;}

  <div class="mid-wrapper"> <div class="mid-container"> <div class="block-container"> <div class="block-img"> <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> </div> <div class="block-header"> text text text text </div> <div class="block-text"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="btn-link"> <div class="button btn-main"><span> Sign Up</span></div> </div> </div> <div class="block-container"> <div class="block-img"> <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> </div> <div class="block-header"> text text text </div> <div class="block-text"> text text text text text text text text </div> <div class="btn-link"> <div class="button btn-main"><span> Sign Up</span></div> </div> </div> </div> </div>

Mikl mikl 3.181 five 14 · Accepted Answer · 2017-02-21T09:22:07

For example:

  body .mid-container { display:flex; align-items:flex-start; width: 100%; text-align: center; } body .mid-wrapper .mid-container { width: 100%; text-align: center; } body .mid-wrapper .mid-container .block-container { display: inline-block; text-align: -webkit-center; width: 40%; } body .mid-wrapper .mid-container .block-container .block-img { min-height: 160px; } body .mid-wrapper .mid-container .block-container .block-header { font-weight: bold; padding-bottom: 20px; } body .mid-wrapper .mid-container .block-container .block-text { text-align: left; width: 70%; } body .mid-wrapper .mid-container .block-container .btn-main span { left: 36%; } img{width:100px;height:100px;}

  <div class="mid-wrapper"> <div class="mid-container"> <div class="block-container"> <div class="block-img"> <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> </div> <div class="block-header"> text text text text </div> <div class="block-text"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="btn-link"> <div class="button btn-main"><span> Sign Up</span></div> </div> </div> <div class="block-container"> <div class="block-img"> <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> </div> <div class="block-header"> text text text </div> <div class="block-text"> text text text text text text text text </div> <div class="btn-link"> <div class="button btn-main"><span> Sign Up</span></div> </div> </div> </div> </div>

Dhunga Dhunga 240 one 7 · Answer 2 · 2017-02-21T20:28:07

  body .mid-wrapper .mid-container { width: 100%; display: inline-block; position: relative; text-align: center; } body .mid-wrapper .mid-container .block-container { text-align: -webkit-center; width: 40%; } body .mid-wrapper .mid-container .block-container .block-img { min-height: 160px; } body .mid-wrapper .mid-container .block-container .block-header { font-weight: bold; padding-bottom: 20px; } body .mid-wrapper .mid-container .block-container .block-text { text-align: left; width: 70%; } body .mid-wrapper .mid-container .block-container .btn-main span { left: 36%; } img{width:100px;height:100px;} body .mid-wrapper .mid-container .block-container:last-child { border:1px solid hsla(0,0%,0%,1); position:absolute; top:0; left:42%; }

  <div class="mid-wrapper"> <div class="mid-container"> <div class="block-container"> <div class="block-img"> <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> </div> <div class="block-header"> text text text text </div> <div class="block-text"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="btn-link"> <div class="button btn-main"><span> Sign Up</span></div> </div> </div> <div class="block-container"> <div class="block-img"> <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> </div> <div class="block-header"> text text text </div> <div class="block-text"> text text text text text text text text </div> <div class="btn-link"> <div class="button btn-main"><span> Sign Up</span></div> </div> </div> </div> </div>

Dhunga Dhunga 240 one 7 · Answer 3 · 2017-02-21T20:56:19

 body .mid-wrapper .mid-container { width: 100%; display:flex; margin:0 auto;} body .mid-wrapper .mid-container .block-container { border:1px solid hsla(0,0%,50%,1); text-align: -webkit-center; width: 40%; } body .mid-wrapper .mid-container .block-container .block-img { min-height: 160px; } body .mid-wrapper .mid-container .block-container .block-header { font-weight: bold; padding-bottom: 20px; } body .mid-wrapper .mid-container .block-container .block-text { text-align: left; width: 70%; } body .mid-wrapper .mid-container .block-container .btn-main span { left: 36%; } img{width:100px;height:100px;}

 <div class="mid-wrapper"> <div class="mid-container"> <div class="block-container"> <div class="block-img"> <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> </div> <div class="block-header"> text text text text </div> <div class="block-text"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="btn-link"> <div class="button btn-main"><span> Sign Up</span></div> </div> </div> <div class="block-container"> <div class="block-img"> <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> </div> <div class="block-header"> text text text </div> <div class="block-text"> text text text text text text text text </div> <div class="btn-link"> <div class="button btn-main"><span> Sign Up</span></div> </div> </div> </div> </div>

2 blocks of different heights in one row

3 answers 3

More articles: