Two column <dl> with two lines of CSS! Thank you Grid Layout!

dabblet.css

/**
 * Two column <dl> with two lines of CSS! Thank you Grid Layout!
 * Limitation: Breaks if we have multiple consecutive <dt>s or <dd>s
 */

dl {
	display: grid;
	grid-template: auto / 10em 1fr;
}

dt {
	background: #fee;
}

dd {
	background: hsl(220, 10%, 95%);
}

dt, dd {
	margin: 0;
	padding: .3em .5em;
	border-top: 1px solid rgba(0,0,0,.1);
}

dabblet.html

<dl>
	<dt>Foo</dt>
	<dd>Bar</dd>
	<dt>Foo</dt>
	<dd>Bar</dd>
	<dt>Foo</dt>
	<dd>Bar</dd>
	<dt>Foo</dt>
	<dd>Bar</dd>
	<dt>Foo</dt>
	<dd>Bar</dd>
</dl>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"110","seethrough":"","prefixfree":"","page":"css"}

Perfect

If you add dt { grid-column: 1 } and dd { grid-column: 2 } then it works without limitations.

dt { grid-column: 1 } and dd { grid-column: 2 }

This is exactly what I needed, thank you @ap and thank for posting this gist @LeaVerou

Beautiful! Thank you!