Align items left in HTML

Question

I have a question about aligning items in HTML and CSS. I have a price and those prices must be aligned left, but as you can see these items are aligned left but the 4 must be 0 of the 80. These are prices and I think this is not very nice.

One thing I forgot to mention is that these prices are not manually added prices. These are generated with an API. So in the solution you gave me, you can split the number and the decimal. In this case it is one number. Maybe there is a way to split the number and to solve it this way, but I hope there is a better solution. Also I give you a better view of the table. The only thing that must aligned better is the right table row not the left one. As you can see in the picture.

EDIT: Code: This is the HTML code and I am also using AngularJS

 <td md-cell class="tableWidthSell tableBorderLeft tableInnerCell">
                    <table md-table class="innerTable">
                        <tbody>
                            <tr md-row class="datatableRow" ng-repeat="order in term.timeblocks.INTRADAY.SELL | orderBy: 'price': true">
                                <td flex="100" class="tablePaddingLeft clickable" ng-click="openOrder($event, order)" ng-class="{tableMyOrder: order.mine}">{{order.price|number:2}}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <!--Price data | Sell -->
                <td md-cell class="tableWidthSell tableInnerCell">
                    <table md-table class="innerTable">
                        <tbody>
                            <tr md-row class="datatableRow" ng-repeat="order in term.timeblocks.INTRADAY.SELL | orderBy : 'price' : true ">
                                <td flex="100" class="tablePaddingLeft clickable" ng-click="openOrder($event, order)" ng-class="{tableMyOrder: order.mine}">&nbsp;{{order.quantity|number:1}}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>

I hope someone can still help me.

Answer 1

Similar discussion is done here.

One solution would be to...

Just set all the numbers to have a predefined decimal precision. Say you want a 2 digit precision so you will format all your numbers to have two digits after the decimal point.

So for a number like 3218.66 it will be displayed like as such. And for a number like 350 it will be displayed as 350.00.

So Now all you need to do is decide the precision and then right align all of them.

And as you said, later don the line you can use a container <span> or a <div> with a class, to align then right.

Example

Answer 2

If you're using Angular Material you can do

layout="row" layout-align="start"

Looks like you might be, but without more code it's difficult to know