title: li span float left float right
body: <p>I need to do the following:</p>
  
  <pre><code>|text1| lots of text lots of text lots |text3|
  lots of text lots of text lots of text lots 
  of text
  </code></pre>
  
  <p>It is structured as:</p>
  
  <pre><code>&lt;li&gt;&lt;span&gt;text1&lt;/span&gt;&lt;span&gt;text3&lt;/span&gt;&lt;span&gt;lots of text&lt;/span&gt;&lt;/li&gt;
  </code></pre>
  
  <p>text3 is float right.</p>
  
  <p>The problem is that I need to set a width on lots of text as I need the background colour to fill the entire width of the row. If I set it to float:left, it goes down a line and is not on the same line as text1 or text2.</p>