title: Display Two <div>s Side-by-Side
body: <p>My goal is to display two <code>&lt;div&gt;</code>s side-by-side with the content from both <code>&lt;div&gt;</code>s aligned at the top. I do not want long text in the second <code>&lt;div&gt;</code> to wrap underneath the first one.</p>
  
  <p>Finally, I do not want to set the width of the second <code>&lt;div&gt;</code> because I need the markup to work in different widths.</p>
  
  <p>Sample markup is below and at <a href="http://jsfiddle.net/rhEyM/">http://jsfiddle.net/rhEyM/</a>.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.left-div {
      float: left;
      width: 100px;
      height: 20px;
      margin-right: 8px;
      background-color: linen;
  }
  .right-div {
      float: left;
      margin-left: 108px;
      background-color: skyblue;
  }​
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="left-div"&gt;
      &amp;nbsp;
  &lt;/div&gt;
  &lt;div class="right-div"&gt;
      My requirements are &lt;b&gt;[A]&lt;/b&gt; Content in the two divs should line
      up at the top, &lt;b&gt;[B]&lt;/b&gt; Long text in right-div should not wrap
      underneath left-div, and &lt;b&gt;[C]&lt;/b&gt; I do not want to specify a
      width of right-div. I don't want to set the width of right-div
      because this markup needs to work within different widths.
  &lt;/div&gt;
  </code></pre>
  
  <p>​</p>