css - ブートストラップを使用して css クラスを揃える方法

Question

いくつかの div を互いに整列させようとしていますが、何らかの理由で機能しません。シンプルなブートストラップ テンプレートを使用しています...私のコード スニペットは以下で、私の JS フィドルはhttp://jsfiddle.net/sean3200/yU3TA/です 。

     I basically want my html to look like align such as:
     Album1: Name1
     Album2: Name2

    <div id="wellbox" class="well pull-right">
        <div><h3>Album Sales & Net worth</h3></div>
           <hr>
        <a href="#"><p id="album0">Album1:</p></a>
             <div><p id="albumdata0" class="album-class">Name1</p></div>

        <a  href="#"><p id="album1">Album2:</p></a>
             <div><p id="albumdata1" class="album-class"></p>Name2</div>

        <a  href="#"><p id="album2">Album3:</p></a>
             <div><p id="albumdata2"  class="album-class">Name3</p></div>

        <a  href="#"><p id="album3">Album3:</p></a>
             <div><p id="albumdata3" class="album-class"></p></div>
    </div>