dt+dd in one line

dabblet.css

/**
 * dt+dd in one line
 */

article
{
	width: 20em;
}

dl { margin: 1em; background: #a88; clear: both; overflow: auto; }
dl dt, dl dd { display: inline; margin: 0; padding: 0; }
dl dt { font-weight: bold; }

#a dd::after { display: block; content: '★'; }

#b dt, #b dd { float: left; }
#b dt { clear: left; }

#c dd::after { white-space: pre; content: '\A'; }

dabblet.html

<article>

<dl id=a>
<dt>A</dt><dd>a</dt>
<dt>foo</dt><dd>Lorem ipsum, stuff blah, blah, blah and foo and bar and zar and stuff.</dd>
<dt>bar</dt><dd>ditto</dd>
</dl>

<dl id=b>
<dt>A</dt><dd>a</dt>
<dt>foo</dt><dd>Lorem ipsum, stuff blah, blah, blah and foo and bar and zar and stuff.</dd>
<dt>bar</dt><dd>ditto</dd>
</dl>

<dl id=c>
<dt>A</dt><dd>a</dt>
<dt>foo</dt><dd>Lorem ipsum, stuff blah, blah, blah and foo and bar and zar and stuff.</dd>
<dt>bar</dt><dd>ditto</dd>
</dl>


</article>

dabblet.js

// alert('Hello world!');

settings.json

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