title: Flexbox 3 divs, two columns, one with two rows
body: <p>I am trying to take</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Three sequential divs and turn it into below. Where red is div 1, green is div 2, blue is div 3.</p>
  
  <p>I can do this with floats, something like</p>
  
  <pre><code>.div1 { float: left; }
  .div2 { float: left; }
  .div3 { float: left; }
  </code></pre>
  
  <p>But I can't seem to get it working in flexbox, is this possible?</p>
  
  <p><a href="https://i.stack.imgur.com/1od7u.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1od7u.png" alt="enter image description here"></a></p>