title: Float 2 elements next to eachother
body: <p>I'm trying to position two  elements within an li list next to eachother on the right side to get the result:<br>
  <em>Some text.................A...B</em><br><br> Unfortunatelly the ordering drives me crazy.</p>
  
  <p>Here's the html code:</p>
  
  <pre><code>&lt;ul class="list"&gt;
  &lt;li&gt;some text 
       &lt;small class="a"&gt;A&lt;/small&gt;
       &lt;small class="b"&gt;B&lt;/small&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>With the following CSS code I was able to get the small-elements on the right side next to each other, but the result is that i see on the right side B next to A!</p>
  
  <pre><code>.list li{
      background-color:#282828;
      color:#ffffff;
      font-size:20px;
      text-transform:uppercase;
      padding-left:5px;
   }
  
  
   .list small.a {
      display:inline;
      float:right;
   }
  
  
   .list small.b {
      display:inline;
      float:right;
   }
  </code></pre>
  
  <p>So, I aim to have:<br>
  some tex.....................A...B </p>
  
  <p>but for instance it looks like:<br>
  some text....................B...A</p>
  
  <p><strong>See example here</strong> --> <a href="http://jsfiddle.net/LKVdE/" rel="nofollow">http://jsfiddle.net/LKVdE/</a></p>
  
  <p><br><br>
  
  <p>Thanks upfront for any tip!</p>