title: Move an element to next line using CSS, if it doesn't fit in the available area width
body: <p>I have a View created using ExtJS, composed of a Autocompleting Textbox (bound to a store) and a custom templated DataView (again, bound to another store). And the view looks like below.</p>
  
  <p><img src="https://i.stack.imgur.com/MOMLa.png" alt="enter image description here"></p>
  
  <p>Here's how it works.</p>
  
  <ul>
  <li>User searches for a Tag in a searchbox, and selects the matching tag from dropdown. Once selected, it is automatically added to dataview right below, which appears like a Tag Cloud (though not exactly).</li>
  <li>Tag item added to DataView is custom styled, and has "remove" link next to label to remove it from DataView.</li>
  </ul>
  
  <p>Now, here's a problem:</p>
  
  <ul>
  <li>The available width of DataView is fixed, so if a tag item text is longer, you  can see that it gets broken and remaining part of tag appears on next line.</li>
  </ul>
  
  <p>What I want is something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/JcKLC.png" alt="enter image description here"></p>
  
  <p>As you can see that if Tag item is not small enough to fit available area, it gets into next line, but if space is available, it will be on the same line.</p>
  
  <p>Any way to attain it with CSS? or need to write JS logic for this?</p>
  
  <p>Note that for CSS solution, I'm bound to support evil IE7/8.</p>