title: How do I get a flex item to clear all of its siblings?
body: <p>I'm trying to achieve a two-column flex where the left column has many divs, and the right column has one tall div. I'd like the right column to be at the top of the flex box, inline with the first div of the left column.</p>
  
  <p>But whatever I try, the right column div lines up with the last of the left column's <code>div</code>.</p>
  
  <p>A little hard to explain, but this jsfiddle shows what I mean.</p>
  
  <p><a href="https://jsfiddle.net/sjf4evx5/1/" rel="nofollow noreferrer">https://jsfiddle.net/sjf4evx5/1/</a></p>
  
  <p>I want the blue div to be at the top next to all the red divs. </p>
  
  <p>Seems like it should be easy, but alas...</p>