Question

I have two order lists with comparable information but list item contents may not have the same length. Due to wrapping, certain list items span different number of lines.

List 1        List 2
1. xxx        1. xxxxxxxx
2. xxxxxxxx      xxx
   xxx        2. xxxxxxxx
3. xxxxxxxx      xxxxxxxx
   xxx           xxx
4. xxxx       3. xxxx
              4. xxxx

Is there a way such that equal item labels are horizontally aligned (without resorting to using tables)?

List 1        List 2
1. xxx        1. xxxxxxxx
                 xxx
2. xxxxxxxx   2. xxxxxxxx
   xxx           xxxxxxxx
                 xxx
3. xxxxxxxx   3. xxxx
   xxx
4. xxxx       4. xxxx

Answer 1

CSS just isn’t equipped for this, unless you’re content with making each li a fixed height. Honestly, I think that if you’re needing these aligned, your lists are related to each other, and really it is semantically a table.