description list

dabblet.css

/**
 * description list
 */

dl { font: 1.5em/1.25 Georgia; width: 20em; margin: 1.25em auto }

dt, dd { display: inline; margin: 0 }

dt { font-style: italic }

dt::after { content: ": " }

dd::after { content: ""; display: block; height: 1.25em }

dabblet.html

<dl>
	<dt>short name</dt>
	<dd>short value</dd>
	
	<dt>short name</dt>
	<dd>value can be long, much longer than you would have expected</dd>
	
	<dt>name can be long, much longer than you would have expected</dt>
	<dd>short value</dd>
	
	<dt>name can be long, much longer than you would have expected</dt>
	<dd>value can be long, much longer than you would have expected</dd>
</dl>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}