LaTeX-style definition lists

[krivit]

I am finding that the default HTML definition lists---which put the defined term on a separate line from the definition description---take up too much space in the context of a slide presentation. What is the best way to produce definition lists in the style of LaTeX's description environments?

That is,

• Defined term is boldfaced and not indented.
• Definition description starts immediately after the defined term (or perhaps after interword space).
• Subsequent lines of the definition description are indented.
• If the defined term is longer than the indentation, it is not wrapped.
• If the defined term is shorter than the indentation, the first line of the definition description starts at the indentation.

E.g. (from a Wikibooks example),

Does anyone have a good way to produce this behaviour?

I've looked, but I haven't been able to find anything satisfying, and anything that even comes close also requires changing the behaviour of the p tag, which seems like it could have unpleasant side-effects.

Thanks in advance!

[Martinomagnifico]

.reveal dl {
  --fontsize: calc( 1 * var(--r-main-font-size));
  --dlindent: calc( 2 * var(--fontsize));
  --dldistance: calc( .5 * var(--fontsize));
  padding-left: var(--dlindent);
  font-size: 0;
}
.reveal dt {
  display: inline-block;
  font-size: var(--fontsize);
  margin-left: calc(-1 * var(--dlindent));
  padding-right: var(--dldistance);
  min-width: calc(var(--dlindent) - var(--dldistance));
}
.reveal dd {
  display: inline;
  font-size: var(--fontsize);
  margin-left: 0;
}
.reveal dd + dt {
  margin-top: var(--dldistance);
}
.reveal dd:after {
  display: block;
  content: "";
}

[krivit]

Thank you very much! This works great!

[krivit]

Following up, it looks like there is a quirk in Pandoc that if the definition description contains multiple paragraphs (or a paragraph followed by a sublist), the text becomes wrapped in p tags, which forces a new line. I hadn't thought to specify the correct behaviour for this scenario it in my original list of requirements: mea culpa.

Here's a refinement of @Martinomagnifico's excellent snippet. Its effect is to style the paragraph immediately inside a definition description inline, but only if it's the first child. I am very bad at modern CSS---to the point where I didn't even realise that selectors could be nested until an hour ago, hence my original remark about having to restyle p globally---but it seems to work for my tests.

.reveal dl {
  --fontsize: calc( 1 * var(--r-main-font-size));
  --dlindent: calc( 2 * var(--fontsize));
  --dldistance: calc( .5 * var(--fontsize));
  padding-left: var(--dlindent);
  font-size: 0;
}
.reveal dt {
  display: inline-block;
  font-size: var(--fontsize);
  margin-left: calc(-1 * var(--dlindent));
  padding-right: var(--dldistance);
  min-width: calc(var(--dlindent) - var(--dldistance));
}
.reveal dd {
  display: inline;
  font-size: var(--fontsize);
  margin-left: 0;
}
.reveal dd + dt {
  margin-top: var(--dldistance);
}
.reveal dd:after {
  display: block;
  content: "";
}
.reveal dd > p:first-child {
  display: inline
}

Edit:
A few more corrections: definition lists nested inside other definition lists behave weirdly without the first, and that last rule cause lists to be rendered weirdly if immediately following the first paragraph, hence the following fixes:

.reveal dd > dl {
  display: block;
}
.reveal dd > ul {
  display: block;
}
.reveal dd > ol {
  display: block;
}