aligner twitter bootstrap barre de progression et un badge

Je suis en utilisant twitter bootstrap pour mon site. Je voudrais utiliser une barre de progression pour indiquer le pourcentage d'achèvement du processus.

Dans la barre de progression, je veux afficher le nom de l'étape de processus et de l'utilisation d'un badge, soit à la fin ou au début de la barre de progression pour afficher le pourcentage d'achèvement.
Voici le JS fiddle lien pour ce que je suis en train de faire

http://jsfiddle.net/KBTy7/12/

<div id="coolstuff" style="margin-top: 10px;">
    <span class="badge" style="padding: 3px; width: 10px">10%</span>
    <div class="progress" id="prgbar">
        <div title="PO Details" class="bar" style="width: 20%;" id="prgwidth">Add New PO Detail</div>
    </div><!-- end of progress bar -->
</div> <!-- end of cool stuff -->

Mais le pays de bade et la barre de progression n'obtenez pas alignées les unes à côté. Je ne suis pas très bon en css donc je ne suis pas sûr de ce que je peux faire pour les aligner dans la même ligne.

OriginalL'auteur Neel | 2012-06-03