html - Full width span floating to right -

I wonder how could there be more than one spacing inside a div, the last span is running at the bottom right and Taking all the remaining width in the "row"

Here's a fiddle: The problem is that the full-length period is not always below. You can resize your browser window to increase the full width of the period.

How should it look like this:

< P> Do not see:

HTML:

  & lt; Div class = "container" & gt; & Lt; Span class = "item" & gt; Sdfdsfsdf & lt; / Span & gt; & Lt; Span class = "item" & gt; Sdfsdfsdfsdf & lt; / Span & gt; & Lt; Span class = "item" & gt; Dsfdsfdsfsd & lt; / Span & gt; & Lt; Span class = "item" & gt; Fsdfsdfsdffsdf & lt; / Span & gt; & Lt; Span class = "item" & gt; Dsgsdf & lt; / Span & gt; & Lt; Span class = "item" & gt; Dfd & lt; / Span & gt; & Lt; Span class = "item" & gt; FDFDF & lt; / Span & gt; & Lt; Span class = "itemFullWidth" & gt; Full width & lt; / Span & gt; & Lt; / Div & gt;   
 CSS:  
 . Container {background color: blue; Width: 50%; } .item {float: left; Background color: orange; Height: 30px; Line-height: 30px; / * Vertical center * / margin: 5 pixels; } .itemFullWidth {background color: green; Display area; Hidden flurry; Height: 30px; Line-height: 30px; / * Vertical center * / margin: 5 pixels; Minimum width: 80px; }    
 
 
 If you open to use Flexbox, then do it easily Can be:  
 . Container {Display: Flex; Flex-wrap: rap; / * Allow multiple lines * /. Container & gt; : The last child {Flex: 1; / * Absorbs the remaining space * /}