CSS: <DL> with spacing/margin between the dt/dd pairs

Question

I have the following html:

<dl>
        <dt>Item 1</dt>
        <dd>
            <ul>
                <li>Value 1</li>
            </ul>
        </dd>
        <dt>Item 2</dt>
        <dd>
            <!-- this item is missing a value -->
        </dd>
        <dt>Item 3</dt>
        <dd>
            <ul>
                <li>Value 1</li>
                <li>Value 2</li>
                <li>Value 3</li>
            </ul>
        </dd>
    </dl>

I would like to lay it out like (instead of the normal dl which puts the term and definitions under each other):

Item 1    Value 1
Item 2    
Item 3    Value 1
          Value 2
          Value 3

Which is not a problem. The problem is that I would like to add a margin between each term/definition pair. The problem is that the definitions are not the same height (they range between 0 up to 5 list items), so I cannot apply the same margin on the dd tags.

Answer 1

How's this?

dt, dd { display: block; float: left; margin-top: 20px; }
dt { clear: both; }