title: Left and right align on same line
body: <p>I want to create a <code>div</code> that has a header containing two pieces of text. One piece of text will be aligned left and one right. The header will have a gray background that will expand with the text:</p>
  
  <pre><code>&lt;div id="expand-box"&gt;
     &lt;div id="expand-box-header"&gt;
        &lt;span style="float: left;"&gt;Top left header&lt;/span&gt; 
        &lt;span style="float: right;"&gt;Top right header&lt;/span&gt;
     &lt;/div&gt;
     Lorem ipsum dorem nori seota ostiy
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#expand-box
  {
      width: 100%;
      padding: 0;
      border: 2px solid #BBB;
      margin: 7px 0 0 0;
  }
  
  #expand-box-header
  {
      background-color: #BBB;
      margin: 0;
      color: #FFF;
      padding: 0 0 3px 2px;
  }
  </code></pre>
  
  <p>While this works, the two <code>spans</code> float over the <code>expand-box-header</code> gray background and the Lorem Ipsum text floats higher than it should.</p>