align table footer right - html

Question

I have a table which contains data and I want the first footer item to be aligned left and the remaining ones to be aligned right.
Here is expected results:
table {
width: 100%
}
<table class="price-list">
<thead>
<tr>
<th>No</th>
<th>Nome</th>
<th>Quantidade</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
<td>text4</td>
</tr>
</tbody>
<tfoot class="footer">
<tr align="left">
<td id="cart_voucher" class=" cart_voucher">
<form action="http://localhost:8080/index.php?controller=order-opc" method="post" id="voucher">
<div class="form-group form-group-placeholder">
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" placeholder="Kod rabatowy" value="">
<i class="fa fa-angle-right discount_icon" aria-hidden="true"></i>
<input type="hidden" name="submitDiscount">
</div>
</form>
</td>
</tr>
<!-- end VOUCHER -->
<!-- Total products -->
<tr align="right">
<td>Total products </td>
<td id="total_product">500,00 zł</td>
</tr>
<tr align="right">
<td Total shipping (tax incl.):>
</td>
<td id="total_shipping" class="price-opc">12,00 zł</td>
</tr>
<tr align="right">
<td>Total (tax excl.):</td>
<td id="total_price_without_tax" class="price-opc">418,50 zł</td>
</tr>
<!-- end Total tax excl. -->
<!-- Total tax -->
<tr align="right">
<td>Total tax:</td>
<td>93,50 zł</td>
</tr>
<!-- end Total tax -->
<tr align="right">
<td>Total:</td>
<td>
<span>512,00 zł</span>
</td>
</tr>
</tfoot>
</table>
I used inline align="left" for first footer element and align="right"for the remaining ones. I get the following:
UPDATE more explanation
In a footer we have form input and other data , form input should be left and the remaining footer element should be right as image describe below
I tried using flex-box for each tr but nothing worked. Can someone please help me? I just want the first element in the footer to align left and the rest to align right. Thanks, any help or suggestions will be helpful. Ignore thead and tbody, just consider tfoot.

Answer 1

You can apply float attribute for which accept right or left velues
.container {
width: 100%;
height: 100px;
background-color: red;
}
.left {
float: left;
background-color: yellow;
}
.right {
float: right;
background-color: yellow;
}
<div class="container">
<div class="left">Left Child</div>
<div class="right">Right Child</div>
</div>
This is how the attribute is work