Make children divs the height of tallest child

Solution 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

Solution 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.