html/css, how to make element padding not cover over previous elements?

html/css, how to make element padding not cover over previous elements?

I have written a jsfiddle of the issue. I want the span with the padding
to be pushed further down so it does not obscure the one above it. It
currently appears that the layout only takes into account the content text
size and ignores the padding. I would like to be able to achieve this with
a generic css rule that works regardless of what padding values the
overlapping span has, if that is possible.
html:
<span class='outer'>
<span class='inner'>
<span class='content'>Hello</span>
</span>
<span class='inner'>
<span class='content'>
<span id='pad-me-out'>
World
</span>
</span>
</span>
</span>
css:
.outer > .inner{
clear:left;
float:left;
}
#pad-me-out{
background: #999;
padding:7px 14px;
}