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

Question

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 1

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>