CSS add space between elements when one is below the other?

Question

I'm trying to figure out how to do this, basically I have two elements.

<div class="button">This is the first one</div>
<div class="button">This is the second one</div>

Sometimes both fit next to each other, in which case I'm ok with their styling.

However if the second one "falls down" due to the parent being too narrow I don't want the two elements to touch each other.

My problem is that adding a bottom-margin to the elements would also affect Case 1 (when they are next to each other) which I don't want to do. How can I separate the two elements when one is below the other?

Jsfiddle (try expanding and shrinking the result box)

Answer 1

A very simple solution would be using negative padding values, but since it's impossible, we can use another simple way, even though it's a bit of a walk around. You can wrap the container with another wrapping element, and give the container a negative margin-top value.

jsFiddle Demo

HTML:

<div class="wrapper">
    <div class="container">
        <div class="button">This is the first button</div>
        <div class="button">This is the second button</div>
    </div>
</div>

CSS:

.wrapper {
    overflow: hidden;
}
.container {
    margin-top: -10px;
}
.button {
    margin-right: 10px;
    margin-top: 10px;
}