title: CSS Align top of child container to bottom of parent container
body: <p>Consider this HTML</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;a href="#"&gt;Parent&lt;/a&gt;
      &lt;div class="child"&gt;
          &lt;a href="#"&gt;Child&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do is position the top of <code>child</code> to the bottom of <code>parent</code>.</p>
  
  <p>Here's my CSS so far:</p>
  
  <pre><code>.parent {
      position: relative;
  }
  
  .child {
      position: absolute;
      left: 0;
      bottom: 0;
  }
  </code></pre>
  
  <p>What this achieves is this:</p>
  
  <p><a href="https://i.stack.imgur.com/mAY4y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mAY4y.png" alt="Example 1"></a></p>
  
  <p>What I want to achieve is this:</p>
  
  <p><a href="https://i.stack.imgur.com/lFWEM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lFWEM.png" alt="Example 2"></a></p>
  
  <p><strong>Please note:</strong> I do not know the height of either the parent or child container, and don't really want to set an arbitrary height, and I don't want to revert to using JavaScript.</p>