Formatting of list - text alignment between different bullets - html

Question

as of now I did all my reports in LaTex and only recently I started to use HTML (for many reasons). What I am looking for is the HTML solution for a text formatting. The problem is the following: in a list of N bullets each bullets should be formatted in this way:
bullet#1 [text-of-length1] <- space -> [text-of-length2]
bullet#2 [text-of-length3] <- space -> [text-of-length4]
the 4 lengths could be different, but I want the text [length2] and [4] (the 2nd text part in each bullet), to start at the same point in space.
In LaTex this is solved imposing a certain size of a box that contains the first part of the text, thus pushing the second part of the bullet to start only after this box.
I tried to write each text in a table cell and partially works, but now the text is not aligned to the bullet (as if the cell is aligned but the text is slightly off-set up, the vspace = "bottom" did not help).
<ul style="list-style-type:square">
<li><table style="display:inline"><tr><td width="100">test</td><td>test</td>
</tr></table></li>
<li><table style="display:inline"><tr><td width="100">test2</td>
<td>test2</td></tr></table></li>
</ul>
Any idea?
Thanks in advance.

Answer 1

Try setting the style vertical-align: baseline; to table cells. This will align the table cell contents with bullet.
td {
padding: 1;
vertical-align: baseline;
}
<style type="text/css">
td {
padding: 1;
vertical-align: baseline;
}
</style>
<ul style="list-style-type:square">
<li>
<table style="display:inline">
<tr>
<td width="100">test test test test<br/>test</td>
<td>test</td>
</tr>
</table>
</li>
<li>
<table style="display:inline">
<tr>
<td width="100">test2</td>
<td>test2</td>
</tr>
</table>
</li>
</ul>