Inline definition list with multiple dd elements to 1 dt element

Question

Done some Googling and Stackoverflowing on this subject, but I haven't found quite what I'm looking for. I'm looking to use CSS to style a definition list that has multiple dd elements in an inline style. What I mean is I need this:

DT first definition term:         DD term 1-1 // DD term 1-2 // DD term 1-3
DT second definition term:        DD term 2-1
DT third definition term:         DD term 3-1 // DD term 3-2 // DD term 3-3 // DD term 3-4 // DD
                                  term 3-5
.
.
DT twenty-first definition term:  DD term 21-1 // DD term 21-2

I can only find examples of where there's a 1-to-1 pairing of DT to DD, but nothing that can show multiple DD elements inline.

(Notice above, for the third list, that when there's a new line, the items are always indented flush with each other.)

Does anyone know how to do this? Thanks!

EDIT

Example of what I'm getting:

The red circled items are "Buy from author" (dt) and its dd elements. The blue ones are "Buy book" (dt) and its dd elements. You can see how they're mixed together.

To the red-circled DD elements, I've applied display: inline-block; and margin: 0; (without the margin setting, there's a huge indent).

Sorry I can only include a photo. The code and CSS are inside a sandbox site that you can't access without username/password creds.

Answer 1

Make <dd> inline-block and <dt> element inline. By default they are block element. Now insert line breaks via pseudo element on <dt>

dt {
  display: inline;
  margin-right:20px;
}

dt::before {
  content: "\A";
  white-space: pre;
 
}

dd {
  display: inline;
  margin:0;
}

  <dl>
    <dt>Buy from author::</dt>
    <dd>Black hot drink</dd>
    <dd>//White cold drink</dd>
    <dd>//White cold drink</dd>
    <dd>//Black hot drink</dd>
    <dd>//White cold drink</dd>
    <dd>//White cold drink</dd>
    <dd>//Black hot drink</dd>
    
    <dt>Milk:</dt>
    <dd>White cold drink</dd>
    <dt>Coffee:</dt>
    <dd>Black hot drink</dd>
    <dd>//White cold drink</dd>
    <dd>//White cold drink</dd>
    <dt>Milk:</dt>
    <dd>White cold drink</dd>
    <dd>//White cold drink</dd>
  </dl>

Answer 2

you can make use of blocks instead of line-breaks using a variation on the original answer.

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

dt,
dd {
  display: inline;
}

dt {
  font-weight: bold;
}

dt::before {
  content: '';
  display: block;
}

<dl>
  <dt>English</dt>
  <dd>coffee</dd>
  <dt>Dutch</dt>
  <dd>koffie</dd>
  <dt>Ottoman Turkish</dt>
  <dd>???? (kahve)</dd>
  <dt>Arabic</dt>
  <dd>??????? (qahwah)</dd>
  <dd>?????? (qahiya) [to lack hunger]</dd>
</dl>

If you desire a layout with terms and definitions aligned in two columns, display: grid; seems like the best option, as some comments have suggested. There are a lot of great resources for css grid on MDN and Grid By Example. It's an extremely versatile layout!

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "language coffee";
}

dt {
  font-weight: bold;
  grid-column: language;
}

dd {
  grid-column: coffee;
}

<dl>
  <dt>English</dt>
  <dd>coffee</dd>
  <dt>Dutch</dt>
  <dd>koffie</dd>
  <dt>Ottoman Turkish</dt>
  <dd>???? (kahve)</dd>
  <dt>Arabic</dt>
  <dd>??????? (qahwah)</dd>
  <dd>?????? (qahiya) [to lack hunger]</dd>
</dl>

Answer 3

The strucure described sounds alot like a row oriented table with the first column as the header and the rest of the columns are at amounts on each row.

DL is the table ...................................................................................................... display: table
Then DIV^? are the rows ......................................................................... display: table-row
Finally, DT and DD are cells ................................................................ display: table-cell

^{? <div> <template> and <script> are VALID as direct children of <dl>}

:root {
  font: 1ch/1.5 'Segoe UI';
}

body {
  font-size: 1.5rem;
}

dl {
  display: table;
  table-layout: fixed;
  min-width: 100%;
  padding: 5px;
  border-collapse: collapse;
  background: #bad;
}

div {
  display: table-row;
}

dt,
dd {
  display: table-cell;
  padding: 2.5px 5px;
  border: 0;
}

dt {
  border-right: 3px solid tomato;
  text-align: right;
  font-weight: 900;
  color: tomato;
  background: #cab;
}

dd {
  border-left: 3px dashed #930;
  text-align: left;
  background: #dad;
}

dd:first-of-type {
  border-left: 0;
}

dd:last-of-type {
  border-right: 3px solid tomato;
}

div:first-of-type dt::after,
div:first-of-type dd::after {
  content: ' 1';
}

div:nth-of-type(2) dt::after,
div:nth-of-type(2) dd::after {
  content: ' 2';
}

div:last-of-type dt::after,
div:last-of-type dd::after {
  content: ' 3';
}

<DL>
  <DIV>
    <DT>DT</DT>
    <DD>DD</DD>
    <DD>DD</DD>
    <DD>DD</DD>
  </DIV>
  <DIV>
    <DT>DT</DT>
    <DD>DD</DD>
  </DIV>
  <DIV>
    <DT>DT</DT>
    <DD>DD</DD>
    <DD>DD</DD>
    <DD>DD</DD>
    <DD>DD</DD>
    <DD>DD</DD>
  </DIV>