Question

I have a list that needs to look like this

aa. Item 1
bb. Item 2

I’ve tried doing this

<ol>
    <li style="list-style-type:none;">aa. <span style="padding-left:15px;">Item 1</span></li>
    <li style="list-style-type:none;">bb. <span style="padding-left:15px;">Item 2</span></li>
</ol>

This works perfectly, but my problem is when the text expands to line two it looks like this

aa. Item 1
Item 1 line continues here
bb. Item 2

I need it to look like this

aa. Item 1
    Item 1 line continues here
bb. Item 2

Is it possible to achieve this? Possible without counters, since it needs to be inline.

Answer 1

This link ought to do it for you. I have changed the spans to divs and set them to inline-block.

link to fiddle