Make children divs the height of tallest child

Question

I have two child <div> elements inside of a parent container <div> as shown:

<div class="row">     <div class="item">         <p>Sup?</p>     </div>     <div class="item">         <p>Sup?</p>         <p>Wish that other guy was the same height as me</p>     </div> </div> 

I tried the following CSS:

.item {     background: rgba(0,0,0,0.1);     display: inline-block; }  .row {     border: 1px solid red; } 

How can I get both children (div.item) to be the height of the tallest child?

jsFiddle: http://jsfiddle.net/7m4f7/

Answer 1

One solution is to change the display value from inline-block to table-cell for the descendant div.item elements:

.row {     border: 1px solid red;     display: table;     border-spacing: 20px; /* For controlling spacing between cells... */ } .item {     background: rgba(0,0,0,0.1);     display: table-cell; } 

Example

Answer 2

Another solution is to use flexbox: http://jsfiddle.net/7m4f7/4/

.item {     background: rgba(0,0,0,0.1);     -webkit-box-flex: 1;     -moz-box-flex: 1;     -webkit-flex: 1;     -ms-flex: 1;     flex: 1; }  .row {     border: 1px solid red;     display: -webkit-box;     display: -moz-box;     display: -webkit-flexbox;     display: -ms-flexbox;     display: -webkit-flex;     display: flex; } 

However, support is limited (but getting better!) See http://caniuse.com/flexbox

Otherwise you need to use javascript to set the heights manually.