title: In flex container, position child 1 on top, and stack 2 and 3 at bottom
body: <p>I am using flexbox to get the height of the parents to be the same (need them to match) and <code>flex-wrap</code> to wrap every 3.</p>
  
  <p>I then have a button that is always going to be at the bottom. </p>
  
  <p>The first child will always have different sized heights, but always the same width.</p>
  
  <p>Now the trick is, I want child 2 to be at the bottom on top of the button and have both clear the content of child 1.</p>
  
  <p>Absolute positioning will not clear the text of child 1.</p>
  
  <p>I tried <code>flex-grow</code>, but it didn't work for me, maybe because I am new to flexbox.</p>
  
  <p>Please look at the fiddle: <a href="https://jsfiddle.net/mm783qc6/4/" rel="nofollow">https://jsfiddle.net/mm783qc6/4/</a></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>.contain {
    display: flex;
    border: 1px solid #000;
    width: 100%;
    flex-wrap: wrap;
  }
  .p {
    width: 29.5%;
    float: left;
    position: relative;
    margin: 0 10px 30px;
    border: 1px solid red;
  }
  .bb {
    position: absolute;
    bottom: 0;
    border: 1px solid green;
  }
  .c1 {
    border: 1px solid blue;
  }
  .c2 {
    border: 1px solid orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contain"&gt;
  
    &lt;div class="p"&gt;
      &lt;div class="c1"&gt;
        &lt;p&gt;Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="c2"&gt;
        &lt;p&gt;Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="bb"&gt;
        &lt;p&gt;---------------Button--------------&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="p"&gt;
      &lt;div class="c1"&gt;
        &lt;p&gt;Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and textRandom Height and text Random Height and
          text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="c2"&gt;
        &lt;p&gt;Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="bb"&gt;
        &lt;p&gt;-------Button-------&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="p"&gt;
      &lt;div class="c1"&gt;
        &lt;p&gt;Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and textRandom Height and text Random Height and
          text Random Height and text Random Height and text Random Height and text Random Height and&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="c2"&gt;
        &lt;p&gt;Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="bb"&gt;
        &lt;p&gt;-------Button-------&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="p"&gt;
      &lt;div class="c1"&gt;
        &lt;p&gt;Random Height and text Random Height&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="c2"&gt;
        &lt;p&gt;Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="bb"&gt;
        &lt;p&gt;---------------Button--------------&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="p"&gt;
      &lt;div class="c1"&gt;
        &lt;p&gt;Random Height and text Random Height&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="c2"&gt;
        &lt;p&gt;Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="bb"&gt;
        &lt;p&gt;-------Button-------&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="p"&gt;
      &lt;div class="c1"&gt;
        &lt;p&gt;Random Height and text Random Height&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="c2"&gt;
        &lt;p&gt;Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="bb"&gt;
        &lt;p&gt;-------Button-------&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>