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>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora.</dd>
	<dt>Foo</dt>
	<dd>Bar</dd>
	<dt>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora.</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":"html"}