How to align dt and dd side-by-side using flexbox with multiple dd underneath the other?
<p>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.</p>

<pre><code>Authors          John Doe
                 Jane Doe
                 Max Mustermann

Publishers       Johne Doe
                 Jane Doe
                 Max Mustermann
</code></pre>

<p>My problem is how do I force a line break between each <code>dd</code> 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 <code>dd</code> elements in their own container.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>dl {
  display: flex;
}

dt {
  width: 33%;
}

dd {
  margin: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dl&gt;
  &lt;dt&gt;Authors&lt;/dt&gt;
  &lt;dd&gt;John Doe&lt;/dd&gt;
  &lt;dd&gt;Jane Doe&lt;/dd&gt;
  &lt;dd&gt;Max Mustermann&lt;/dd&gt;
&lt;/dl&gt;

&lt;dl&gt;
  &lt;dt&gt;Publishers&lt;/dt&gt;
  &lt;dd&gt;John Doe&lt;/dd&gt;
  &lt;dd&gt;Jane Doe&lt;/dd&gt;
  &lt;dd&gt;Max Mustermann&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
</div>
</div>
</p>