title: How to set column height equal in few rows Bulma (flexbox)?
body: <p>I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.</p>
  
  <hr>
  
  <p>How can I set column height equal to others? (see codepen below)</p>
  
  <p>Notice they are all in another column container, and there are few rows of those columns.</p>
  
  <p>Expected behaviour: <em>(woah i made optical illusion)</em>
  <a href="https://i.stack.imgur.com/FvmD5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FvmD5.png" alt="enter image description here"></a></p>
  
  <p><a href="https://codepen.io/anon/pen/JNKexr" rel="nofollow noreferrer">https://codepen.io/anon/pen/JNKexr</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="columns"&gt;
   &lt;div class="column"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.
    &lt;/div&gt;
  &lt;div class="column"&gt;
  
    &lt;div class="columns"&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-info"&gt;Lorem ipsum&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-success"&gt;Nulla a mauris vel &lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="columns"&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-info"&gt;Lorem ipsum&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-success"&gt;Nulla a mauris vel &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-warning"&gt;Pellentesque
  &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-danger"&gt;Morbi turpis nunc&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="columns"&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-info"&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-success"&gt;Nulla&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-warning"&gt;Pellentesque eros tortor,
  &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-danger"&gt;Morbi&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="columns"&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-info"&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;p class="notification is-success"&gt;Nulla&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column is-6"&gt;
      &lt;p class="notification is-warning"&gt;Pellentesque eros tortor,
  &lt;/p&gt;
  
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>Question is related to my previous one: <a href="https://stackoverflow.com/questions/43564132/how-to-set-column-height-equal-to-longest-column-in-bulma-flexbox">How to set column height equal to longest column in Bulma (flexbox)?</a></em></p>
  
  <ul>
  <li>edit: corrected title</li>
  <li>edit2: it has something to do with <code>align-content: stretch;</code> class, though I'm have no idea how to use it. More info: <a href="http://cssreference.io/flexbox/#align-content" rel="nofollow noreferrer">http://cssreference.io/flexbox/#align-content</a></li>
  </ul>