title: Filling vertical space with flexbox
body: <p>I'm using flexbox for the first time and some items are at different heights. I'm attempting to get that empty space created by a long image, or possibly a lot of text to get filled in by other items. </p>
  
  <p>Image below shows how I'd like to move the divs:
  <a href="https://i.stack.imgur.com/u9IXe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u9IXe.png" alt="Red arrows show the direction I want filled in"></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="noises"&gt;  
  &lt;div class="card text" title=" On a Sunday at 3:24 a.m. "&gt;
      &lt;strong&gt;&lt;p&gt; Test title&lt;/p&gt;&lt;/strong&gt;
      &lt;p&gt; test&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="card text" title=" On a Sunday at 3:24 a.m. "&gt;
      &lt;strong&gt;&lt;p&gt; title&lt;/p&gt;&lt;/strong&gt;
      &lt;a href="#" target="_blank"&gt;
          &lt;img src="https://via.placeholder.com/100x150" style="max-width:-webkit-fill-available;max-width:-moz-available"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="card text" title=" On a Sunday at 3:24 a.m. "&gt;
      &lt;strong&gt;&lt;p&gt; title&lt;/p&gt;&lt;/strong&gt;
      &lt;a href="#" target="_blank"&gt;
          &lt;img src="https://via.placeholder.com/170x130" style="max-width:-webkit-fill-available;max-width:-moz-available"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="card text" title=" On a Sunday at 3:24 a.m. "&gt;
      &lt;strong&gt;&lt;p&gt; Lorem ipsum dolor sit amet&lt;/p&gt;&lt;/strong&gt;
      &lt;p&gt; Lorem ipsum&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="card text" title=" On a Sunday at 3:24 a.m. "&gt;
      &lt;strong&gt;&lt;p&gt; title&lt;/p&gt;&lt;/strong&gt;
      &lt;a href="#" target="_blank"&gt;
          &lt;img src="https://via.placeholder.com/300x648" style="max-width:-webkit-fill-available;max-width:-moz-available"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="card text" title=" On a Sunday at 3:24 a.m. "&gt;
      &lt;strong&gt;&lt;p&gt; Test title&lt;/p&gt;&lt;/strong&gt;
      &lt;p&gt; test&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="card text" title=" On a Sunday at 3:24 a.m. "&gt;
      &lt;strong&gt;&lt;p&gt; Test title&lt;/p&gt;&lt;/strong&gt;
      &lt;p&gt; test&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#noises, .noises{
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:center;
      align-items:flex-start;
      height:auto;
      margin:auto;
  }
  .noise_column{
      flex:30%;
      max-width:30%;
      padding: 0 4px;
  }
  .noise_column img {
      margin-top: 8px;
      vertical-align: middle;
      max-width:300px;
  }
  #noises &gt; div, .card{
      min-width: 300px;
      max-width: 300px;
      margin-bottom: 1em;
      padding: 0.5em 0.5em 0.5em 2em;
      margin: 1em;
      border: 2px solid #515151;
      border-radius: 0px 15px 0px 15px;
  }
  .card, .card &gt; img{
      max-width:300px;
  }
  </code></pre>
  
  <p>Codepen:
  <a href="https://codepen.io/ddefreitas/pen/wvvxgaW" rel="nofollow noreferrer">https://codepen.io/ddefreitas/pen/wvvxgaW</a></p>