title: HTML/CSS: Two columns. Need div in right column to always be at the bottom
body: <p>I have a blog layout that needs a "Read More" text link to always be at the bottom of the right column. It's a two column layout usually with a featured image on the left and Title, excerpt, etc on the right.  I tried using absolute positioning with extra wrappers to extend the columns to equal height and place the button, but that seems to take the button out of the flow and cause long excerpts to overlap the button.  Here is the sample code.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="left" style="width:40%;background:yellow;display:inline-block;"&gt;
      &lt;h1&gt;Lorem Lorem Lorem&lt;/h1&gt;
      &lt;h2&gt;Ipsum ipsum ipsum&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="right" style="width:30%;background:gray;display:inline-block;"&gt;
      &lt;p&gt;This text will vary in length.  Might be longer than left column, might be shorter.&lt;/p&gt;
      &lt;div class="right-bottom" style="border:1px solid black;margin:3px;"&gt;Must be at bottom of right column.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Need that .right-bottom div to always be at the bottom of the right column (and the columns to be equal height, which I think I can achieve.</p>