html/css, how to push an element on to the next line?

html/css, how to push an element on to the next line?

I've written this small fiddle showing what I want, but what I would like
to know is, is there away to style the .stack-slot elements so that they;
(a) shrink to the size of their content and (b) stack vertically beneath
one another as shown, using a css rule instead of <br/> tags?
html:
<span class='stack-panel vertical'>
<span class='stack-slot'>
<span class='content'>1</span>
</span>
<br/>
<span class='stack-slot'>
<span class='content'>2</span>
</span>
<br/>
<span class='stack-slot'>
<span class='content'>3</span>
</span>
</span>
css:
.stack-panel.vertical .stack-slot
{
/*TODO replace effect of <br/> tag*/
}