Flexible multiline definition list

dabblet.css

/**
 * Flexible multiline definition list
 */
dl { width: 200px; display: grid; grid-template-columns: 1fr 80%; gap: .5em .25em; }

dt { counter-increment: css-counter 1; font-weight: bold; white-space: nowrap; }

dt::before { content: counter(css-counter)". "; font-weight: normal; }

dt::after { content: ":"; }

dd { margin: 0; }

dabblet.html

<dl>
	<dt>foo</dt>
	<dd>Definition of foo, which goes on for a little bit</dd>
	<dt>bar</dt>
	<dd>Definition of bar</dd>
</dl>
<!-- Evidently it's even correct to wrap terms in `dfn` tags (within the `dt` tags) if this is a true definition list -->

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}