smares smares - 14 days ago 8
CSS Question

How to align dt and dd side-by-side using flexbox with multiple dd underneath the other?

I am trying to create a list consisting of key-value-pairs where the key is on the left and the values are on the right side one underneath the other.

Authors John Doe
Jane Doe
Max Mustermann

Publishers Johne Doe
Jane Doe
Max Mustermann


My problem is how do I force a line break between each
dd
element? I know this would be easy with floating elements, but I was wondering if it's possible to achieve using flexbox only. Unfortunately, by definition, I cannot wrap the
dd
elements in their own container.



dl {
display: flex;
}

dt {
width: 33%;
}

dd {
margin: 0;
}

<dl>
<dt>Authors</dt>
<dd>John Doe</dd>
<dd>Jane Doe</dd>
<dd>Max Mustermann</dd>
</dl>

<dl>
<dt>Publishers</dt>
<dd>John Doe</dd>
<dd>Jane Doe</dd>
<dd>Max Mustermann</dd>
</dl>




Answer

How about setting flex-wrap on the dl and have a width > 50% for dd along with margin-left: auto?

See demo below:

dl {
  display: flex;
  flex-wrap: wrap;
}
dt {
  width: 33%;
}
dd {
  margin-left: auto;
  width: 66%;
}
<dl>
  <dt>Authors</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

<dl>
  <dt>Publishers</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>