title: fix elements to the bottom of a flex container
body: <p>I am using flexbox to create part of a page and I have 2 buttons that will open modals in one of the flexbox items. I would like to fix the buttons to the bottom of the item like a footer if possible. </p>
  
  <p>I have created a <a href="https://codepen.io/harveymj/pen/LLbxbQ" rel="nofollow noreferrer">CodePen</a> to demo the issue. I have tried several solutions but I can't seem to get the buttons aligned at the bottom. I am relatively new to HTML and CSS so it's very possible that I've missed something trivial. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    margin-top: 20px;
  }
  
  .one {
    background-color: black;
    color: white;
    font-size: 30px;
    padding: 10px;
    width: 450px;
    flex-grow: 1;
    height: 600px;
  }
  
  .two {
    background-color: grey;
    color: white;
    font-size: 30px;
    padding: 10px;
    flex-grow: 1.2;
    width: 524px;
    height: 600px;
  }
  
  button {
    background-color: green;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div class="one"&gt;
      &lt;p&gt; I would like to align the buttons to the bottom of this item &lt;/p&gt;
      &lt;button id="Btn1"&gt;Open Modal 1&lt;/button&gt;
      &lt;button id="Btn2"&gt;Open Modal 2&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="two"&gt;
      &lt;p&gt; No buttons for this item &lt;/p&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>