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

css, flexbox, html

Solution

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>

Problem

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

Original source