Inserting tab spaces to align text vertically in HTML/CSS

Question

I am not sure how to get the following behaviour using a combination of HTML and CSS: ``` foo = this foobar = bit goso = needs etcetc = aligning ``` Now I could just insert spaces where required (like I did above), but I'm pretty sure there must be a way to do this "automatically". I know I could use tables to do this, but would prefer not to. Is there any other way of doing this? My question boils down to this: How do I automatically align text vertically, in a similar way to tabs in office suites, using HTML/CSS. Here is an in context example: ```

foo = "abcDeveloper"

bar = "123"

foobar = "dfg"

foobarstar = "456"

``` In this example, I would like text in class b to be aligned vertical…

Accepted Answer

One method would be to apply `display: inline-block;` to your `span.a`s, and then give them a set width: http://jsfiddle.net/nzrHn/1/

```
.a { display: inline-block; width: 100px; }
```

Inserting tab spaces to align text vertically in HTML/CSS

Solution

Problem