In the following HTML, the div .left and .right have different heights. Is it possible to make both divs same height without defining the height. I have tried using display:table but does not work.
.wrap{
overflow:hidden;
width:250px;
display: table;
border-collapse: collapse;
}
.left{
width:100px;
float:left;
display: table-cell;
border-bottom:1px solid green;
}
.right{
width:150px;
float:left;
border-bottom:1px solid red;
display: table-cell;
} <div class="wrap">
<div class="left">
Lorem
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>jsfiddle: http://jsfiddle.net/fJbTX/1/