I am having trouble aligning my table to the right of my invoice page, similar to this:
https://i.sstatic.net/cDS8S.png
Even though I have placed these two tables in the same row and into two columns, it's not displaying as expected. I want the second table to be positioned on the highlighted blue section of the page.
Here is the snippet of my code:
<div class="row">
<div class="col-4 col-md-4 col-sm-5 " >
<table class="table table-bordered ">
<th><strong> Payment Received </strong></th>
<tbody>
<tr style="page-break-after: always;">
<td class="left">
Payment Method: xxxxxx
</td>
</tr>
<tr>
<td class="left">
Reference No: 2192012
</td>
</tr>
<tr>
<td class="left">
Amount Paid: RM10,000.00
</td>
</tr>
<tbody>
</table>
<div>
<div class="col-4 col-md-4 col-sm-5 mr-auto ">
<table class="table table-clear">
<tbody>
<tr>
<td class="left">
<strong>Subtotal</strong>
</td>
<td class="right">8.497,00</td>
</tr>
<tr>
<td class="left">
<strong>Transportation(Klang Valley)</strong>
</td>
<td class="right">1,699,40</td>
</tr>
<tr>
<td class="left">
<strong>Transportation(Outstation)</strong>
</td>
<td class="right">679,76</td>
</tr>
<tr>
<td class="left">
<strong> Grand Total</strong>
</td>
<td class="right">
<strong>7.477,36</strong>
</td>
</tr>
<tr>
<td class="left">
<strong> Discount</strong>
</td>
<td class="right">
20%
</td>
</tr>
<tr>
<td class="left">
<strong> Amount Paid</strong>
</td>
<td class="right">
7.477,36
</td>
</tr>
<tr>
<td class="left">
<strong> Balance Due</strong>
</td>
<td class="right">
<strong>7.477,36</strong>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I can't seem to figure out why the alignment to the right isn't working, even though they are in the same row. What could be the issue?