html - How to make sure output of <pre> tags is properly aligned

Question

How should I write text inside a <pre> tag (in particular consider the presence of other HTML tags such as <b> or <a>) so that the final result is properly aligned vertically? Here is an example of what I'd like to achieve:

9            texts          blah
10           texts          blah
11           texts          blah
12           texts          blah

I'm currently getting things like this:

9            texts          blah
10            texts          blah
11            texts          blah
12            texts          blah

Answer 1

Could you programmatically add   in front of any number less than 10? Or add a 0 in front of all single digits during output? Either of those should help "push" the text to the right, plus align the single digits to the ones column in your list.