title: Apply different CSS style on wrapping
body: <p>I can't for the life of me think of where to start here - basically what I want to achieve is a three column row, in which the columns can wrap below each other if they cannot fit horizontally. The height of the row should be the smallest to fit the items, with a fixed height when all the cells are in line. The contents of the "cells" should be centered vertically if the row is too large for them eg:</p>
  
  <pre><code>[           ] [ Big     ] [           ]
  [  Content1 ] [         ] [ Content2  ]
  [           ] [ Content ] [           ]
  </code></pre>
  
  <p>Should wrap something like...</p>
  
  <pre><code>[           ] [ Big     ]
  [  Content1 ] [         ] 
  [           ] [ Content ]
        [ Content2  ]
  </code></pre>
  
  <p>Then...</p>
  
  <pre><code>[  Content1 ] 
   [ Big     ]
   [         ] 
   [ Content ]
  [ Content2  ]
  </code></pre>
  
  <p>The issue I'm running into is.. how can I shrink/grow the height of the "cells" to be the greater of their own content and their horizontal neighbours content? </p>
  
  <p>The best idea I've had is to use JS to look at the offsetHeight to determine if they are on the same "row", then adjust the height accordingly.. but it seems a little clunky. Any better ideas?</p>
  
  <p>Thanks guys!</p>