title: How can I force spans to be on the same line as a div?
body: <p>I have a simple structure of:</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>but I want to force them all on one line! at the moment, they appear:</p>
  
  <pre><code>&lt;div /&gt;
  &lt;span /&gt;&lt;span /&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>so I want </p>
  
  <pre><code>[____________] 25% ObjectA
  [________________________] 50% ObjectB
  [______] 12.5% ObjectC
  [______] 12.5% ObjectD
  </code></pre>
  
  <p>and not</p>
  
  <pre><code>[____________] 
  25% ObjectA
  [________________________] 
  50% ObjectB
  [______] 
  12.5% ObjectC
  [______] 
  12.5% ObjectD
  </code></pre>