title: align twitter bootstrap progress bar and badge
body: <p>I am using twitter bootstrap for my site. I would like to use progress bar to indicate the percentage completion of the process.</p>
  
  <p>In the progress bar I want to display the name the step in process and use a badge either at the end or start of progress bar to display the percent complete.
  Here is the JS fiddle link for what I am trying to do</p>
  
  <p><a href="http://jsfiddle.net/KBTy7/12/" rel="nofollow">http://jsfiddle.net/KBTy7/12/</a></p>
  
  <pre><code>&lt;div id="coolstuff" style="margin-top: 10px;"&gt;
      &lt;span class="badge" style="padding: 3px; width: 10px"&gt;10%&lt;/span&gt;
      &lt;div class="progress" id="prgbar"&gt;
          &lt;div title="PO Details" class="bar" style="width: 20%;" id="prgwidth"&gt;Add New PO Detail&lt;/div&gt;
      &lt;/div&gt;&lt;!-- end of progress bar --&gt;
  &lt;/div&gt; &lt;!-- end of cool stuff --&gt;
  </code></pre>
  
  <p>But the bade and progress bar don't get aligned side by side. I am not very good at css so I am not sure what I can do to align them in the same row.</p>