How to always justify the currency symbol on the left and the figure on the right in html?

Currently I have this rendered HTML table (in dark mode):-
renderedhtmltable
As you can see each data in column "Currency" and "Total" has the RM currency symbol which always 1 space before the figures. What I want to achieve now is to have both columns being formatted that would display like below in html email body :-
expectedoutput
The currency symbol RM should always justified on the left while the number should always justified on the right in the same cell. As u can see more digits in the number, the nearer it become towards the currency symbol,the space between the symbol RM and the number should depend on the width of the cell:-

I have tried using div as answered in Right align and left align text in same HTML table cell. Below is the html code I've tried so far:-

<td nowrap>
  <div style="float:left;width:8px">RM</div>
  <div style="float:right;">123444948</div>
</td>

But I noticed this method has caused the display font overall shrinks way too much because it tries to retain a far gap between the currency symbol and the figure even after I have strictly set the width for div with RM is just 8px. I want it to be flexible, just like how we can see it when we apply this type of formatting in gsheet.Is this even possible? Thanks.