title: how to get 2 div's text to align along the bottom?
body: <p>I'm designing a contact page and would like to have 2 columns, one with a label (e.g. facebook, twitter) and one with the actual details. The thing is I want the two lines (which have text of different size) to both align along the bottom edge.</p>
  
  <p>It's probably easier if I show you: <a href="http://goonbee.com/contact" rel="nofollow">http://goonbee.com/contact</a></p>
  
  <p>At the moment, the label and details are vertically aligned along the centre. How can I make them align along the bottom?</p>
  
  <p>My CSS is:</p>
  
  <pre><code>#contactbox {
      display: block;
      margin-top: 25px;
  }
  
  #contactboxlabels {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 17px;
      color: #c9c9c9;
      line-height: 42px;
      text-align: right;
      float: left;
      padding: 0;
      margin: 0;
  }
  
  #contactboxdetails {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 35px;
      color: #545454;
      line-height: 42px;
      text-align: left;
      vertical-align: bottom;
      float: left;
      padding: 0;
      margin: 0;
      margin-left: 15px;
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="contactbox"&gt;
      &lt;div id="contactboxlabels"&gt;
          &lt;span&gt;email&lt;br /&gt;twitter&lt;br /&gt;facebook&lt;br /&gt;phone&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div id="contactboxdetails"&gt;
          &lt;span&gt;&lt;a href="mailto:x@x.com"&gt;x@x.com&lt;/a&gt;&lt;br /&gt;&lt;a href="http://twitter.com/goonbee"&gt;@goonbee&lt;/a&gt;&lt;br /&gt;&lt;a href="http://facebook.com/goonbee"&gt;facebook.com/goonbee&lt;/a&gt;&lt;br /&gt;&lt;a href="tel:+44000000"&gt;+44 000000&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div style="clear:both"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>