Keeping width of two tables same - html

Question

Here I have 2 tables, I want these 2 tables' width to be same, when the Confirmer name is long the second table expands but the first one remains same, I want both of them to be of same width in any situation, how can that be done? Check this JS Bin example.
HTML:
<table>
<tbody><thead><tr><th>1.5 - STATE</th>
</tr></thead><tr>
<td>
<b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43
</font></td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<th>
Confirmer
</th>
<th>Status</th>
<th>Date</th>
<th>Comment</th>
</tr>
<tr>
<td>Pathak Chankey</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>User Administrator</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
</tbody></table>
CSS:
thead{
background-color: grey;
}
table, td
{
background:#fffAF0;
border: 1px solid black;
border-collapse:collapse;
}

Answer 1

Just add a container and set a width in your container then apply the 100% width to your tables like this
div{
width:400px;
}
table {
width:100%;
}
<div>
<table></table>
<table></table>
</div>
http://jsbin.com/iduciw/32/edit

Answer 2

Why do not you use a single table?
<table>
<tr>
<th colspan="4">1.5 - STATE</th>
</tr>
<tr>
<td colspan="4"><b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43 </font></td>
</tr>
<tr>
<th> Confirmer </th>
<th>Status</th>
<th>Date</th>
<th>Comment</th>
</tr>
<tr>
<td>Pathak Chankey</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>User Administrator</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
</table>