Css 同一行上的dt（左浮动）和第一dd（右浮动）

我使用定义列表来定义简历的各个部分

我希望每个dt和它的第一个dd显示在同一行上。dt应该在左边，dd应该在右边。我希望每个dt的剩余dds显示在dt下方

我还需要这是响应，所以随着屏幕宽度的减少，第一个dd进入下一行

现在，我似乎无法在正确的位置清除浮标

有什么想法吗

这是我的密码：

HTML:

<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>

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;
}

谢谢

dd {
    clear:both;
}

dt + dd{
    clear: none;   
}

---

从

dt

顶部删除该边距。它把它推到了第二排。添加

clear:both

到位置

dd

以将其保持在浮动下方的新行上。这似乎有效，但我希望时间/日期在移动到新行时向左对齐，因为屏幕宽度减小。没有媒体查询就可以做到这一点吗？没有javascript我想不出来。