Progress bar without line breaks

Progress bar without line breaks

I am trying to place a progress bar on the same line with some other elements, but there is always a line break before and after the progress bar. I've been using <span> for other elements, but that doesn't work with the jQuery UI progress bar. This is the kind of code:

  1. <div>
  2. <span>before</span>
  3. <div id="progressbar" class="progress" style="width:50px; height: 30px;"></div>
  4. <span id="progressbar-text" class="progress-text">after</span>
  5. </div>
 
Any ideas how to get all elements to display on the same line?

Many Thanks.