Make divs inside table cells the same height without javascript

Question

I would like to make two divs contained in table cells in a shared row both have the height of the taller div. I would like to do this without JS. Here is a fiddle with a simplified example: http://jsfiddle.net/Lem53dn7/1/

Here is the code from the fiddle:

HTML

<table>
    <tr>
        <td>
            <div>small content</div>
        </td>
        <td>
            <div>this is some longer content that will wrap.
                 I want the other div to be the same height as this one.</div>
        </td>
    </tr>
</table>

CSS

table{
    width: 200px;
    table-layout: fixed;
}
div {
    border: 1px solid black;
}

Answer 1

You can add a height to the TD elements and then make the DIVs height 100%:

table{
    width: 200px;
    table-layout: fixed;
    height: 100%;
}

table td {
    height: 100%;
}

div {
    border: 1px solid black;
    height: 100%;
}

http://jsfiddle.net/Lem53dn7/7/

Answer 2

Add the following properties to your div rule:

height: 100%;
display: inline-block;

Updated fiddle.