How to balance two dynamic table rows height using jquery

Question

I have two dynamic tables here.Tables rows details comes dynamically.How can i balance two dynamic table rows height using jquery my fiddle here http://jsfiddle.net/kannankds/2yvj3/14/

<table>
<tr>
<th>name</th>
<th>lastname</th>
</tr>
<tr>
<td>name1 name2 name3</td>
<td>name1</td>
</tr>
<tr>
<td>name1 name2 name3</td>
<td>name1</td>
</tr>
</table>
<table>
<tr>
<th>details1</th>
<th>details2</th>
</tr>
<tr>
<td>sadsad</td>
<td>asdsd</td>
</tr>
<tr>
<td>sadsad</td>
<td>asdsd</td>
</tr>
</table>

Answer 1

You can apply the following css to td and th elements:

td,th {
    white-space: nowrap;
}

DEMO