CSS display:table and padding-top

Question

I am currently using display:table in CSS in order to place some blocks in a form.

But there is a behaviour I cannot understand: when two blocks are set with display:table-cell;, both depending on a display:table father div, it is impossible to put a margin or a padding-top on only one block, without applying it on the second.

A quick example: here

I only want to put a padding-top on the second block.

How can I do this ?

Answer 1

add vertical-align:top to the one that you want place up, and to the other one add the padding that you need to go down.

.col1 {
    display: table-cell;
    vertical-align: top;
}

http://jsfiddle.net/nW8Dg/5/

Answer 2

Not with table appearance for sure, use list instead or inline-blocks