How to style dt and dd so they are on the same line?

Question

Using CSS, how can I style the following:

<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd?>
</dl>

so the content of the dt show in one column and the content of the dd in another column, with each dt and the corresponding dd on the same line? I.e. producing something that looks like:

Answer 1

<style type="text/css">
* {
 padding:0;
  margin:0
}
dl {
 width:100%;
 overflow:hidden;
 background:#ff0;
}
dt {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 background:#cc0;
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 background:#dd0
}
</style>
<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd?>
</dl>

Test it here: http://htmledit.squarefree.com/

Answer 2

Nimbuz answer is good. I would add "clear: left;" to dt. If there are any dt's without a following dd the "table" will still display correctly.