li span float left float right

I need to do the following:

|text1| lots of text lots of text lots |text3|
lots of text lots of text lots of text lots 
of text

It is structured as:

<li><span>text1</span><span>text3</span><span>lots of text</span></li>

text3 is float right.

The problem is that I need to set a width on lots of text as I need the background colour t开发者_如何学JAVAo 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.

Like this

jsFiddle

span {
  float: left;
  display: inline;
}

span.withbg {
  width: 200px;
  background: red;
}

<ul>
  <li>
    <span id="left">text1</span>
    <span class="withbg">lots of text</span>
    <span id="right">text3</span>
  </li>
</ul>