I have a list. Each item in the list contains an icon span and text span like so:

```
 <ul id="features">
     <li>
         <span class="icon"></span>
         <span class="text">blah blah blahlrceoahuoa steohuasnoet huntaoheu saoetnhu saoetuhsaoe tuhsaoetnhu saoehtuasoetnhu saou</span>
     </li>            
 </ul>

```

Using the following CSS

```
#features { list-style-type: none; }
#features li { overflow: auto;}
#features li span { float: left;  }
#features .icon { background: #000; height: 55px; width: 55px; display: inline-block;}
#features .text { margin-left: 24px; display: inline-block;  }

```

I believe this code should produce text which floats next to the icon, and automatically adjusts its width accordingly. However this isn't the case [see jsfiddle.](http://jsfiddle.net/dwZaN/1/)

Why isn't the text floating next to the icon?