JSFiddle - React, Tailwind, and code Playground

by gweax

HTML

<h1>Two columns definition list</h1>
<p>
  Display a definition list in two columns, but keep groups together. That is, a column break
  should not occur within a group of one or more definition terms followed by one or more
  defintion data elements. A column break should only occur before such a group.
</p>
<p>
  The CSS property
  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-before"><code>break-before</code></a>
  is what we need. But it isn't supported in most browsers.
</p>
<p>
  Is there another way to display a definition list in two columns that works cross browser?
</p>
<p>
<a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element">The standard</a> allows grouping <code>div</code> elements within a definition list. I would rather not rely
  on this.
</p>

<dl>
  <dt>One</dt>
  <dd>Eins</dd>

  <dt>Two</dt>
  <dd>Zwei</dd>

  <dt>Three</dt>
  <dd>Drei</dd>

  <dt>Four</dt>
  <dd>Vier</dd>
</dl>

<dl>
  <dt>One</dt>
  <dd>Eins</dd>

  <dt>Two</dt>
  <dd>Zwei</dd>

  <dt>Three</dt>
  <dd>Drei</dd>
  <dd>Trois</dd>

  <dt>Four</dt>
  <dd>Vier</dd>
</dl>

<dl>
  <dt>One</dt>
  <dd>Eins</dd>

  <dt>Two</dt>
  <dd>Zwei</dd>

  <dt>Three</dt>
  <dd>Drei</dd>

  <dt>Four</dt>
  <dd>Vier</dd>

  <dt>Five</dt>
  <dd>Fünf</dd>
</dl>

<dl>
  <dt>Zero</dt>
  <dt>Nought</dt>
  <dd>Null</dd>

  <dt>One</dt>
  <dd>Eins</dd>

  <dt>Two</dt>
  <dd>Zwei</dd>

  <dt>Three</dt>
  <dd>Drei</dd>

  <dt>Four</dt>
  <dd>Vier</dd>
</dl>

CSS

/* Display a definition list in two columns */
dl {
  column-count: 2;
  column-gap: 1em;
  column-fill: balance;
  border: 1px solid;
  padding: 0.5em;
}

dt {
  font-weight: bold;
}
dt {
  margin-top: 0.5em;
}
dt:first-child,
dt + dt {
  margin-top: 0;
}

dt + dt {
  /* prevent a column break between definition terms */
  break-before: avoid;
}

dd {
  /* prevent a colum break before definition data */
  break-before: avoid;
  
  margin: 0;
}