我想列出一个定义列表<dl>，其中<dt>个元素在一列中，对应的<dd>个元素在另一列中.
棘手的部分是，我希望我的<dt>不会换行，如果它们对于第一列来说太宽，我希望<dd>个元素移动down个元素来腾出空间:
以下是我的目标截图:
以下是ASCII艺术版:
first dt first dd goes here and can be any length
second dt second dd is here and also any length
a much longer dt that overlaps
third dd moves down to make room
last dt last dd
我得到的最接近的方法是使用FlexBox并排放置元素，然后手动调整附加到Long <dt>元素的<dd>个元素的位置:
dl {
display: flex;
flex-flow: row wrap;
}
dt {
flex-basis: 10em;
white-space: nowrap;
}
dd {
flex-basis: calc(100% - 10em);
margin: 0;
}
dt.long-dt {
flex-basis: 100%;
}
dt.long-dt + dd {
flex-basis: 100%;
padding-left: 10em;
} <dl>
<dt>one</dt>
<dd>one</dd>
<dt class="long-dt">two that is longer</dt>
<dd>two only moves down because I manually told it to in the CSS</dd>
<dt>three</dt>
<dd>three</dd>
</dl>我能想到几个其他的解决方案，但没有一个可以在不手动处理较长的<dt>个元素的情况下干净利落地工作.
如何在css中实现此布局？我很乐意更改HTML，只要它是合理的语义.