title: Format list horizontally or vertically depending on available space
body: <p>I'd like to render a list of items either horizontally or vertically, depending on available horizontal space.  The contents of the list items may change dynamically, so <code>@media</code> queries don't really help.</p>
  
  <p>Example:</p>
  
  <pre><code>item1 item2 item3 item4   |&lt;-- right border of parent box
  </code></pre>
  
  <p>Now we change <code>item2</code> to <code>muchlongeritem2</code> and the layout should change to:</p>
  
  <pre><code>item1                     |
  muchlongeritem2           |&lt;-- right border of parent box
  item3                     |
  item4                     |
  </code></pre>
  
  <p>Is there a way to achieve this using only CSS?  I could come up with a JavaScript solution, but if someone has some code ready I'd be happy to check it out, too.</p>