Definition list with inline pairs

Question

I'm trying to create a definition list of term-definition pairs, each pair existing on a single, separate line. I've tried making dts and dds display:inline, but then I lose the line breaks between the pairs. How do I make sure I have a line for each pair (and not for each individual term/definition)?

Example:

<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>

yielding:

Term 1 Def 1
Term 2 Def 2

The CSS for making them inline would be:

dt,dd{display:inline;}

yielding:

Term 1 Def 1 Term 2 Def 2

...which is not what I want (line breaks between pairs missing).

Answer 1

Another solution:

dt:before {
  content: "";
  display: block;
}
dt, dd {
  display: inline;
}

Answer 2

Try this:

dt, dd { float: left }
dt { clear:both }

Add margin-bottom to dt dd if you'd like more space between them..