title: Align contents of div to the bottom
body: <p>I have a div containing 2 paragraphs. I want the paragraphs to be aligned to the bottom right of the div. I was able to align the paragrams using <code>text-align: right</code>, but I am struggling with trying to get the paragrams to align to the bottom of the div.</p>
  
  <p>The markup is quite simple:</p>
  
  <pre><code>&lt;div&gt;
     &lt;p&gt;content 1&lt;/p&gt;
     &lt;p&gt;content 2&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div{
      border: 1px red solid;
      height: 100px;
  }
  
  p{
      text-align: right;
  }
  </code></pre>
  
  <p>I tried using <code>position:absolute</code> on the paragrams and setting <code>bottom: 0</code>, but this makes the paragraphs overlap each other due to the absolute positioning.</p>
  
  <p>The div does not span the whole page, so the paragraph text should be contrained within the div.</p>
  
  <p>Is there a way to achieve the effect such that the content "grows from the bottom"?</p>
  
  <p>The effect I want is like this (photoshopped):
  <img src="https://i.stack.imgur.com/ByOLD.png" alt="enter image description here"></p>
  
  <p>And a fiddle of the above: <a href="http://jsfiddle.net/cbY6h/" rel="noreferrer">http://jsfiddle.net/cbY6h/</a></p>