title: Css flex div with meta data at the bottom stretch to same height
body: <p>I have a box with two sections, the header with image and the content at the bottom separate to two sections, the text and the action button. </p>
  
  <p>The problem is the text is sometimes big and sometimes small and i need all the boxes to stretch to the same height based on the larger box.</p>
  
  <p>This is my try with flex, but for some reason it does not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .wrapper &gt; div {
    max-width: 25%;
    margin-right: 1rem;
  }
  .wrapper &gt; div .img {
    height: 100px;
    width: 200px;
  }
  .wrapper &gt; div .img img {
    max-width: 100%;
  }
  .wrapper &gt; div .meta {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="wrapper"&gt;
  
    &lt;div&gt;
      &lt;div class="img"&gt;
        &lt;img src="http://lorempixel.com/400/200" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="meta"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus tempora perspiciatis repellat minus voluptates iure ratione doloremque nulla excepturi ducimus, autem modi temporibus expedita quos eum magnam saepe facilis itaque?&lt;/p&gt;
  
        &lt;div class="action"&gt;
          &lt;button&gt;click me&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;div class="img"&gt;
        &lt;img src="http://lorempixel.com/400/200" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="meta"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus tempora perspiciatis&lt;/p&gt;
  
        &lt;div class="action"&gt;
          &lt;button&gt;click me&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>