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

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.

Since <div> elements default to display: block, which takes up all available width, you'll need to set it to display: inline-block. You'll also need to break the lines manually with a <br>, or do something fancy on the last <span> to make it fill the rest of the available space.

Alternatively, wrap each row in another block-level element (such as another <div>) to create new rows.

The suggestion of Dylan will work but sometimes if one of the div's width is very less then the next div will come inline with this div element. see this fiddle. So, my suggestion is to use :after pseudo element which will be display: block. This pseudo element will be for the last span in every bar section.

div {
    /* width and height are just for example */
    width: 100px;
    height: 50px;
    background-color: red;
    display: inline-block;
}
div+span+span:after {  /* last span element's pseudo element */
    content:"";
    display: block;
}

Working Fiddle