How can I force spans to be on the same line as a div?

Question

I have a simple structure of:

<div></div><span></span><span></span>

but I want to force them all on one line! at the moment, they appear:

<div />
<span /><span />

unfortunately, I HAVE to have the first element as a div; the div is acting as a bar from a bar chart (so rounded corners, width = jquery stuff, no content and block colour inside), the next span is the value the bar represents and the last span is what the value is associated to.

so I want

[____________] 25% ObjectA
[________________________] 50% ObjectB
[______] 12.5% ObjectC
[______] 12.5% ObjectD

and not

[____________] 
25% ObjectA
[________________________] 
50% ObjectB
[______] 
12.5% ObjectC
[______] 
12.5% ObjectD

Answer 1

Put the CSS property display: inline-block on the div to make it act like an inline element instead of taking up the whole line.

Edit:

@Mr_Green's suggestion to use the after pseudo-element to clear each line is absolutely necessary to prevent a broken layout.