Alignment of tables in HTML - html

Question

How do I place 3 different tables - L1, L2, R1 in the specified below position:
L1 on Top Left - 2 rows
L2 immediately below L1 on the Left - 2 rows.
R1 on the Top Right - This has 10 rows
The issue is L2 is placed way below L1 as it is inline, how can I make it appear right below L1? Should float left / right or any other setting can help me achieve this?
https://jsfiddle.net/cyppyntp/4/
<table class="one" id="L1">
<tr>
<th>Month-1</th>
<th>Savings-1</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table class="one" id="L2">
<tr>
<th>Month-2</th>
<th>Savings-2</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$600</td>
</tr>
<tr>
<td>May</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$100</td>
</tr>
<tr>
<td>Sep</td>
<td>$100</td>
</tr>
<tr>
<td>Oct</td>
<td>$100</td>
</tr>
<tr>
<td>Nov</td>
<td>$100</td>
</tr>
</table>
<table class="two" id="R1">
<tr>
<th>Month-3</th>
<th>Savings-3</th>
</tr>
<tr>
<td>December</td>
<td>$400</td>
</tr>
</table>
.inlineTable {
display: inline-block;
}
table.one {
width:45%;
display:inline-block;
vertical-align:top;
}
table.two {
text-align:left;
}

Answer 1

See this fiddle
I've changed the order of your tables slightly. Also, I have added two new divs. See the HTML below
<div class="left">
<table class="one">
<tr>
<th>Month-1</th>
<th>Savings-1</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table class="two">
<tr>
<th>Month-3</th>
<th>Savings-3</th>
</tr>
<tr>
<td>December</td>
<td>$400</td>
</tr>
</table>
</div>
<div class="right">
<table class="one">
<tr>
<th>Month-2</th>
<th>Savings-2</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$600</td>
</tr>
<tr>
<td>May</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$100</td>
</tr>
<tr>
<td>Sep</td>
<td>$100</td>
</tr>
<tr>
<td>Oct</td>
<td>$100</td>
</tr>
<tr>
<td>Nov</td>
<td>$100</td>
</tr>
</table>
</div>
And, also added the below given CSS
.left,.right{
float:left;
width:50%;
}

Answer 2

I'm not a big fan of floats, but they work here without any change to your markup other than class values. You could accomplish the same without even that by using a :first-child selector.
.inlineTable {
display: inline-block;
}
table {
width: 45%;
vertical-align: top;
background: #ddd;
margin-bottom: 10px;
}
table.left {
float: left;
}
table.right {
float: right;
}
<table class="left">
<tr>
<th>Month-1</th>
<th>Savings-1</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table class="right">
<tr>
<th>Month-2</th>
<th>Savings-2</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$600</td>
</tr>
<tr>
<td>May</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$100</td>
</tr>
<tr>
<td>Sep</td>
<td>$100</td>
</tr>
<tr>
<td>Oct</td>
<td>$100</td>
</tr>
<tr>
<td>Nov</td>
<td>$100</td>
</tr>
</table>
<table class="left">
<tr>
<th>Month-3</th>
<th>Savings-3</th>
</tr>
<tr>
<td>December</td>
<td>$400</td>
</tr>
</table>
Demo