title: Bottom align on flexbox with grow
body: <p>I'm trying to create a three row layout using flexbox which is responsive (there can be multiple columns of three rows).</p>
  <p><img src="https://i.stack.imgur.com/FyPcQ.png" alt="MockupOfGoal" /></p>
  <p>The second row (dark blue boxes) should auto-grow in order to accommodate the number of <code>li</code> inside.</p>
  <p>The bottom row should always be aligned to the bottom of the page, so that the words Unserved penalties are aligned between both columns (there may be more columns but two seems like a good sample).</p>
  <p>I've tried various things,</p>
  <ul>
  <li>Setting the bottom div as <code>absolute</code> and <code>bottom: 0</code> all that seems to do is cause it to show on top of the second row.</li>
  <li>Setting <code>align-self</code> to both end and baseline - it doesn't seem to do anything so there is a good chance I'm using it wrong</li>
  </ul>
  <p>The trouble I'm running into is aligning the &quot;Unserved Penalties&quot; div to the bottom of the parent div.</p>
  <p>Any help would be appreciated - I'm trying to do this without the use of JS if possible, using CSS only.</p>
  <p>I've uploaded a simplified fiddle of this here <a href="http://jsfiddle.net/zor3pfxw/" rel="nofollow noreferrer">http://jsfiddle.net/zor3pfxw/</a></p>
  <p>I have tried using bootstrap but can't get it to make the two divs side by side (Team A and Team B) the same size, so switched to flexbox to accomplish this.</p>