title: HTML5/CSS: aligning labels to the left of list items
body: <p>I'm trying to create an ordered list, where some items in the list have labels on their right. The labels should be aligned perfectly to the list items they are related to.</p>
  
  <p>something like this:</p>
  
  <pre><code>(label)   1. first item
            2. second item
  (label)   3. sub list: (a) first sub item
                         (b) second sub item
                         (c) third sub item
  (label)   4. fourth item
            ...
  </code></pre>
  
  <p>The first thing I thought about was a table, but lists inside tables are invalid in HTML.</p>
  
  <p>The second thing I thought about was creating a list in one DIV, and the labels in another DIV, but that I cannot align each label to the related list item.</p>
  
  <p>The third thing I thought about was not using a list at all, just writing the numbers, but then broken lines don't get indented correctly.</p>
  
  <p>The only solution I can come up with is a table (or set of DIVs) where each item is a separate  with the START attribute set individually. This is obviously a very bad solution, but it will at least look ok.</p>
  
  <p>Is there any other solution for this?</p>