title: Way to position element at bottom of floating div?
body: <p>I have a parent div that floats and has a fluid height and width, as part of Foundation's grid layout. With that parent div I have 2 child divs.</p>
  
  <p>I want the content in both child divs to be center aligned and one div to appear at the top of the container, the other at the very bottom of the parent div.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="small-9 columns"&gt;
        Dynamic amount of content
      &lt;/div&gt;
      &lt;div class="small-3 columns"&gt;
        &lt;div class="top"&gt;
          top div with centered text
        &lt;/div&gt;
        &lt;div class="bottom"&gt;
          bottom div with centered text
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Eg: <a href="https://jsfiddle.net/3s0rq04c/11/" rel="nofollow noreferrer">https://jsfiddle.net/3s0rq04c/11/</a></p>
  
  <p>I have tried using flex, as below, with no luck:</p>
  
  <pre><code>.container{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .top {
    align-self: flex-start;
  }
  .bottom {
    align-self: flex-end;
  }
  </code></pre>
  
  <p>I have also tried using position: absolute; eg:</p>
  
  <pre><code>.container {
        text-align: center;
        position: relative;
      }
      .bottom {
        position: absolute;
        margin-bottom: 5px;
      }
  </code></pre>
  
  <p>This almost works, but the text in the bottom is no longer center aligned.</p>
  
  <p>Would anyone know if this is possible?</p>