title: Flexbox children not having same height
body: <p>I thought flexbox makes its children having same height, meaning all children will be as tall as the highest (tallest) child and parent makes this by having default value of align-stretch for cross axis (if it is flex-row). In my case it is not like so.
  I have following pen:
      <a href="https://codepen.io/anon/pen/ZwwwyG?editors=1010" rel="nofollow noreferrer">Codepen link</a> </p>
  
  <pre><code>&lt;div class="flex w-full items-center flex-wrap"&gt;
     &lt;div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-red"&gt;
        &lt;h2 class="marjan-col"&gt;Smaller text&lt;/h2&gt;
        &lt;p&gt;This one has smaller text&lt;/p&gt;
     &lt;/div&gt;
     &lt;div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-blue"&gt;
        &lt;h2 class="text-white"&gt;Bigger text that controls element height&lt;/h2&gt;
        &lt;p class="text-white"&gt;
           Blue element has more text thus making red element smaller and unable to fit entire height 
        &lt;/p&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li><p>Note that taller element (background red) is not having same height as the blue element. </p></li>
  <li><p>I am using tailwind.css here, but I think code is self explanatory.  </p></li>
  </ul>