title: Align an element to bottom with flexbox
body: <p>I have a <code>div</code> with some children:</p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;h1&gt;heading 1&lt;/h1&gt;
    &lt;h2&gt;heading 2&lt;/h2&gt;
    &lt;p&gt;Some more or less text&lt;/p&gt;
    &lt;a href="/" class="button"&gt;Click me&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I want the following layout:</p>
  
  <pre><code> -------------------
  |heading 1          |
  |heading 2          | 
  |paragraph text     |
  |can have many      |
  |rows               |
  |                   |
  |                   |
  |                   | 
  |link-button        |
   -------------------
  </code></pre>
  
  <p>Regardless how much text is in the <code>p</code> I want to stick the <code>.button</code> always at the bottom without taking it out of the flow. I've heard this can be achievable with Flexbox but I can't get it to work.</p>