title: Increase item's height with flexbox
body: <p>Is there a way to create a layout without blank spaces where most items are the same dimensions, but some are 2x the height? I can make something similar to what I want with the following CSS:</p>
  
  <p>Parent:</p>
  
  <pre><code>display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  </code></pre>
  
  <p>Children:</p>
  
  <pre><code>width: 22%
  height: 100px;
  </code></pre>
  
  <p>The tall one has <code>height: 200px</code>. It looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/jP8aj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jP8aj.png" alt="Screnshot 1"></a></p>
  
  <p>It's pretty close, but the problem is that I need a left-to-right order, not top-to-bottom, so I can't use <code>flex-direction: column</code>. If I do the same with <code>flex-direction: row</code>, it doesn't work: </p>
  
  <p><a href="https://i.stack.imgur.com/WOwO2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WOwO2.png" alt="Screenshot 2"></a></p>
  
  <p>Any ideas?</p>