HTML table not aligning properly next to another table - css

Question

I am trying to align my table2 to the right using the align="right" attribute of table, however, it's not exactly aligning next to the table1, as shown in the JSFiddle here. Instead it is getting aligned next to the Third Heading which I don't want.
I want table 1 and table 2 to be next to one another and then Heading 3 should come below it.
Another issue, I was trying to resolve is the position of the Heading 2 with the float:right as shown below. It's not going to extreme right.
.enc-data-table {
margin: 0 0 45px 0;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table">
<tr>
<th>Location:</th>
<td >A</td>
</tr>
<tr>
<th>Type:</th>
<td >B</td>
</tr>
<tr>
<th>Dates:</th>
<td >Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td >D</td>
</tr>
</table>
<table align= "right" class="enc-data-table">
<tr>
<th > Number:</th>
<td >1111</td>
</tr>
<tr>
<th >Plan Information:</th>
<td >1111</td>
</tr>
<tr>
<th >Date of service:</th>
<td >Today</td>
</tr>
<tr>
<th >Location Description:</th>
<td >USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />

Answer 1

Do you want something like this? To set the table alignment properly I recommend setting the th and td elements width separetely!
.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}
.enc-data-table {
margin: 0 0 45px 0;
width: 50%;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
/*.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}*/
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table" align="left">
<tr>
<th>Location:</th>
<td>A</td>
</tr>
<tr>
<th>Type:</th>
<td>B</td>
</tr>
<tr>
<th>Dates:</th>
<td>Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td>D</td>
</tr>
</table>
<table align="right" class="enc-data-table">
<tr>
<th> Number:</th>
<td>1111</td>
</tr>
<tr>
<th>Plan Information:</th>
<td>1111</td>
</tr>
<tr>
<th>Date of service:</th>
<td>Today</td>
</tr>
<tr>
<th>Location Description:</th>
<td>USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />