lining up text in html/css - html

Question

I am trying to line up all the #comments so that they all start from the same distance, from the first #comment to the last #comment.
This is what my code looks like http://jsfiddle.net/#&togetherjs=7C48oh5dl7
I have tried making each comment into a span and adding a text-indent, but as you can see this does not seem to work.
I have also tried adding a padding/margin on the span but it distorts the appearance.
HTML code
<p id="var_ex"> x = 2 <span style="display:inline-block; text-indent: 70px;"> # stores the value 2 into x</span> </p>
<p id="var_ex"> x,y = 2,3 <span style="display:inline-block; text-indent: 70px;"> # assigns 2 and 3 to x and y, respectively</span> </p>
<p id="var_ex"> myText = "This is a string" <span style="display:inline-block; text-indent: 70px;"> # assigning a variable to a string</span> </p>
<p id="var_ex"> myList = [2,3,4,5]<span style="display:inline-block; text-indent: 70px; "> # assigning a variable to a list/array</span> </p>
<p id="var_ex"> fahrenheit = celsius*(9.0/5.0) + 32 <span style="display:inline-block; margin-left:300px;"> #using mathematical expresions</span> </p>

Answer 1

You can achieve it by using <table> element as shown in the following demo sample pertinent to your case:
<table>
<tr>
<td width=30%>
x = 2
</td>
<td width=70%>
# assigns 2 and 3 to x and y, respectively
</td>
</tr>
<tr>
<td>
x,y = 2,3
</td>
<td>
# assigning a variable to a list/array
</td>
</tr>
</table>
You can specify the column width either in absolute (px), or relative units (%).
For more information on <table> formatting with CSS3 (in particular, using header cell tag <th>, also <thead>, <tfoot> and <tbody> section elements, you can refer to the article:
HTML5 Tables formatting: alternate rows, color gradients, shadows (http://www.codeproject.com/Tips/262546/HTML-Tables-formating-best-practices)
Best Regards,