title: Right align some text within a list item
body: <p>I have a nested unordered list which has main content on the left, and I would like to add options which are floated right, such that they are aligned on the right regardless of the level of indentation. </p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt; Item 1 &lt;span class='options'&gt; link &lt;/span&gt; &lt;/li&gt;
  &lt;li&gt; Item 2 &lt;span class='options'&gt; link &lt;/span&gt;
    &lt;ul&gt;
      &lt;li&gt;Item 3 &lt;span class='options'&gt; link &lt;/span&gt; &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have the following css:</p>
  
  <pre><code>ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  li {
      padding-left: 15px;
      width: 400px;
  }
  
  .options {
      float: right;
      width: 50px;
  }
  </code></pre>
  
  <p>When this is used however the options span is aligned to the right, but 1 line below the expected line.</p>
  
  <p>How can I get the options span to line up with the list item?</p>
  
  <p>TIA,
  Adam </p>