title: Bottom vertical align div in parent
body: <p>Im having an issue with vertical aligning a button inside of its parent.
  The button should be aligned to the bottom of the "info" div but I cannot get it to stick.</p>
  
  <p>I cannot use "position: absolute" in this situation.</p>
  
  <p>And i do not know the height of the main parent div beforehand.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;a href="#"&gt;&lt;img src="http://placekitten.com/g/200/400" alt="" /&gt;&lt;/a&gt;
    &lt;div class="info"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem tenetur temporibus voluptas repellendus.&lt;/p&gt;
      &lt;button&gt;Button&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>* { box-sizing: border-box; }
  
  .container {
    width: 200px;
    height: 700px; /* The height is variable!!! */
    background: #ccc;
    padding: 1em;
    overflow: hidden;
  }
  
  a { display: block; height: 50%; }
  a img { display: block; width: 100%; max-width: 100%; }
  
  .info {
    background: #fa0;
    display: block;
    height: calc(50% - 1em);
    margin-top: 1em;
    text-align: center;
  }
  
  .info p {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    background: #a0f;
    margin: 0;
  }
  
  .info button {
    display: inline-block;
    vertical-align: bottom;
  }
  </code></pre>