dt (float left) and first dd (float right) on the same line

[alfannan]

I am using a definition list to define sections of a resume.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.I also need this to be responsive, so as the screen width decreases the first dd goes to the next line.Right now, I can't seem to get the floats to clear at the right point.Any ideas?Here's my code: http://jsfiddle.net/WgkZp/HTML:\[code\]<dl> <dt class="position">Position Name 1</dt><dd class="side-time clearfix"> <time datetime="2010-08-01" class="start">August 2010</time><span class="end">Present</span></dd><dd class="organization first">Organization Name</dd><dd>Location, USA</dd><dd class="additional"> <ul> <li>Described task 1</li> <li>Described tesk 2</li> </ul></dd> <dt class="position">Position Name 2</dt><dd class="side-time clearfix"> <time datetime="2010-08-01" class="start">August 2010</time><span class="end">Present</span></dd><dd class="organization first">Organization Name</dd><dd>Location, USA</dd><dd class="additional"> <ul> <li>Described task 1</li> <li>Described tesk 2</li> </ul></dd> <dt class="position">Position Name 3</dt><dd class="side-time clearfix"> <time datetime="2010-08-01" class="start">August 2010</time><span class="end">Present</span></dd><dd class="organization first">Organization Name</dd><dd>Location, USA</dd><dd class="additional"> <ul> <li>Described task 1</li> <li>Described tesk 2</li> </ul></dd>\[/code\]CSS:\[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\]Thanks!