Two tables right beside each other - html

Question

I want #idTable and #userTable to be beside each other and the button below #idTable. I have tried display: inline-block; but it didn't help. Also, I have tried to put the button after the div#userTable but that would make the button go down more every time that table gets populated with more data. I want the button to remain still on the left side. While the #userTable and its info on the right side of the first table.
HTML:
<input type="date" />
<input type="date" />
<br style="clear:both" />
<table border="1" id="idTable">
<tr>
<th><b>#</b>
</th>
<th><b>ID</b>
</th>
</tr>
<tr>
<td>// #'s here</td>
<td>// ID's here</td>
</tr>
</table>
<br style="clear:both" />
<button>Update</button>
<div id="userTable">
<table border="1">
<tr>
<td><b>ID</b>
</td>
<td>Name</td>
</tr>
<tr>
<td colspan="2">
<table border="1" style="width:100%">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
CSS:
#idTable{
display:inline-block;
}
#userTable{
display:inline-block;
}
JSFiddle Link

Answer 1

You can put #idTable and the button into another div (e.g. #wrapper) and set its float property to left.
HTML:
<div id='wrapper'>
<table border="1" id="idTable">
<tr>
<th><b>#</b>
</th>
<th><b>ID</b>
</th>
</tr>
<tr>
<td>// #'s here</td>
<td>// ID's here</td>
</tr>
</table>
<button>Update</button>
</div>
CSS:
#wrapper {
float: left;
}
See http://jsfiddle.net/82zv67d7/7