Positioning and aligning HTML text

Question

How can I write HTML code to produce output like this:

Calculation 1: 2

Calculation 2: 2

Calculation 3: 2

Total: 8

However I need all the numbers to be aligned ^ about here in the page

Answer 1

Tables will do the trick!

See fiddle https://jsfiddle.net/DIRTY_SMITH/rupbwpx0/1/

  <table style="width:50%">
  <tr>
    <td>Calculation 1:</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Calculation 2:</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Calculation 3:</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Total</td>
    <td>8</td>
  </tr>
</table>

Answer 2

HTML is for markup and if you want to layout, then use CSS. The following HTML code will show exactly what you are looking for and it could be also styled with CSS.

 <div class="main"> <span>Calculation 1:</span> <span>2</span> </div> <div class="main"> <span>Calculation 2:</span> <span>2</span> </div> <div class="main"> <span>Calculation 3:</span> <span>2</span> </div> <div class="main"> <span>Total:</span> <span>8</span> </div>