title: HTML CSS: Aligning 3 divs & the elements within to the bottom
body: <p>I currently have 3 divs within a HTML5 header tag lined up (to the left - a search box, the center - a logo area and a div to the right - for social media icons).  </p>
  
  <p>That seems to be fine, however, I'm having difficulty positioning the left and right elements within those divs to the bottom AND having both the left and right divs to be affected by the size of the logo area.  For example, if my logo was x height, it would push the left and right divs further down as the logo's size height increased.</p>
  
  <p>I've written up a quick example to illustrate hopefully what I'm talking about..
  <a href="http://jsfiddle.net/9patj/" rel="nofollow">http://jsfiddle.net/9patj/</a></p>
  
  <p>If anyone could help, that would be great and perhaps a bonus in walking me through how it is achieved would be really appreciated.</p>