So for specific reasons I'm trying to use the

Normal

Very wide

CodePudding user response：

I've tried things display: table on the parent dl with the dt and dd as display: table-cell but then I can't seem to break the into new rows after the dd along with failed attempts at using flex and css grid so wondering if someone knows a trick to teach?

Table cells need table rows, and table rows need a table (technically a tbody, thead, or tfoot). Originally I thought that the <dl>, <dt>, and <dd> were not fit to configure into a table/grid layout since <dl> was the only parent element, not even <dt> was allowed to have <dt> and <dd> as children. Then I found out that <div> is valid if a direct descendant of a <dl> which is the perfect position to be a table row.

If you want table behavior, assign display table type values:

^{❉A <div> can be a direct descendant (ie child) of a <dl> and a parent of <dt> and <dd>}

Using <table> and table component elements for layout has been discouraged for years, but not display: table and associated values.

html {
  font: 2ch/1.75 'Garamond'
}

main {
  padding: 1rem;
  color: #fff;
  background-color: rgba(0, 0, 0, .8);
}

dl {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 80%;
}

dl>dt {
  display: table-caption;
  width: 100%;
  margin-bottom: 5px;
  padding: 0;
  border: 0;
  font-size: 1.17rem;
  font-weight: 900;
}

dl>div {
  display: table-row;
}

dl>div:first-of-type>dt {
  width: 50%;
}

dl>div:first-of-type>dd {
  width: 50%;
}

div>dt,
div>dd {
  display: table-cell;
}

div>dt {
  padding-right: 10px;
  border-right: 2px solid #fff;
  text-align: right;
}

div>dd {
  padding-left: 10px;
  border-left: 2px solid #fff;
}

<main>
  <dl>
    <dt>Cryptids of Cornwall:</dt>
    <div>
      <dt>Beast of Bodmin</dt>
      <dd>A large feline inhabiting Bodmin Moor.</dd>
    </div>
    <div>
      <dt>Morgawr</dt>
      <dd>A sea serpent.</dd>
    </div>
    <div>
      <dt>Owlman</dt>
      <dd>A giant owl-like creature.</dd>
    </div>
  </dl>
</main>