title: dt (float left) and first dd (float right) on the same line
body: <p>I am using a definition list to define sections of a resume.</p>
  
  <p>I would like to have each dt and its first dd to show on the same line. The dt should be on the left, and the dd on the right. I would like the remaining dds for each dt to show below the dt.</p>
  
  <p>I also need this to be responsive, so as the screen width decreases the first dd goes to the next line.</p>
  
  <p>Right now, I can't seem to get the floats to clear at the right point.</p>
  
  <p>Any ideas?</p>
  
  <p>Here's my code: <a href="http://jsfiddle.net/WgkZp/" rel="nofollow">http://jsfiddle.net/WgkZp/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;dl&gt; 
  &lt;dt class="position"&gt;Position Name 1&lt;/dt&gt;
  &lt;dd class="side-time clearfix"&gt;
      &lt;time datetime="2010-08-01" class="start"&gt;August 2010&lt;/time&gt;&lt;span class="end"&gt;Present&lt;/span&gt;
  &lt;/dd&gt;
  &lt;dd class="organization first"&gt;Organization Name&lt;/dd&gt;
  &lt;dd&gt;Location, USA&lt;/dd&gt;
  &lt;dd class="additional"&gt;
      &lt;ul&gt;
          &lt;li&gt;Described task 1&lt;/li&gt;
          &lt;li&gt;Described tesk 2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/dd&gt; &lt;dt class="position"&gt;Position Name 2&lt;/dt&gt;
  
  &lt;dd class="side-time clearfix"&gt;
      &lt;time datetime="2010-08-01" class="start"&gt;August 2010&lt;/time&gt;&lt;span class="end"&gt;Present&lt;/span&gt;
  &lt;/dd&gt;
  &lt;dd class="organization first"&gt;Organization Name&lt;/dd&gt;
  &lt;dd&gt;Location, USA&lt;/dd&gt;
  &lt;dd class="additional"&gt;
      &lt;ul&gt;
          &lt;li&gt;Described task 1&lt;/li&gt;
          &lt;li&gt;Described tesk 2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/dd&gt; &lt;dt class="position"&gt;Position Name 3&lt;/dt&gt;
  
  &lt;dd class="side-time clearfix"&gt;
      &lt;time datetime="2010-08-01" class="start"&gt;August 2010&lt;/time&gt;&lt;span class="end"&gt;Present&lt;/span&gt;
  &lt;/dd&gt;
  &lt;dd class="organization first"&gt;Organization Name&lt;/dd&gt;
  &lt;dd&gt;Location, USA&lt;/dd&gt;
  &lt;dd class="additional"&gt;
      &lt;ul&gt;
          &lt;li&gt;Described task 1&lt;/li&gt;
          &lt;li&gt;Described tesk 2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/dd&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>dl {
    margin: 0 0 0 20px;
    overflow: hidden;
  }
  
  dt {
    margin-top: 10px;
    float: left;
  }
  
  dt.first {
    margin: 0;
  }
  
  dd {
    margin: 0;
    padding: 0;
  }
  
  dd ul {
    margin-bottom: 0;
  }
  
  dd time, dd .end {
    font-style: italic;
  }
  
  dd time.start:after {
    content:'\2013';
  }
  
  dd.side-time {
    float: right;
  }
  
  .clearfix {
    *zoom: 1;
  }
  
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
    line-height: 0;
  }
  
  .clearfix:after {
    clear: both;
  }
  </code></pre>
  
  <p>Thanks!</p>