Make two columns the same height regardless of con

Question

I have a basic grid system, really basic, which puts to 'cells' side by side in a fluid 'row'. I want the two cells to always match their height so they are equal. So if one has more content than the other, the other expands to match the height of the cell with more content.

<div class="row">
    <div class="cell1">
        <div class="inner">
            <h2>Cell 1</h2>
            <p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>            
        </div>
    </div>
    <div class="cell2">
        <div class="inner">
            <h2>Cell 2</h2>
        </div>
    </div>
</div>

Demo of the problem here: http://jsfiddle.net/QDBff/

Answer 1

you can achieve this by using

display: table

and

display: table-cell

I have modified your jsfiddle - http://jsfiddle.net/Raver0124/QDBff/36/

Also another jsfiddle that i created previously - http://jsfiddle.net/jBMBR/6/