title: CSS: How can I get 2 elements to float at the bottom
body: <pre><code>#container {
      border: 1px solid red;
  }
  #left, #right {
      vertical-align: bottom;
      display: inline-block;
  }
  
  #right {
      float: right;
  }
  
  &lt;div id="container"&gt;
      &lt;div id="left"&gt;
          left
      &lt;/div&gt;
      &lt;div id="right"&gt;right &lt;br /&gt;right &lt;br /&gt;right &lt;br /&gt;right &lt;br /&gt;right &lt;br /&gt;right &lt;br /&gt;right &lt;br /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nxtbqqps/" rel="nofollow noreferrer">http://jsfiddle.net/nxtbqqps/</a></p>
  
  <p>I need to have one span float left and the other span float right, both aligned to the bottom.</p>