css - jquery mobileを使用してテキストを同じ行の右に揃えるには?

Question

jquery mobile を使用していますが、css の適用方法について質問があります。下の画像があり、右揃えを除いて、他のテキストと同じ行に $10 を配置したいと思います。

私は、すべてのテキストを同じ行に配置し、コンテンツを異なるスパン (おそらく span10 と span2) に配置する twitter ブートストラップに慣れています。jquery mobile を使用してこれを行う方法に関するアドバイスはありますか?

コード：

        <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal"> 
            <a class="changePageButton" data-transition="slide">

            <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top"><h2>Himalayan Flavors<small> (0.5 mi)</small></h2>
              <span style="float:right"><label for="province">$10</label></span>
              <right><p>$40 for $20</p></right></li> 

            <li class="custom_listview_img" style = "background-image:url('http://c.yipitcdn.com/thumbor/SOWRPRFYvkagojw-sA_VPeSKK_k=/408x357/smart/c.yipitcdn.com/deal/20-to-spend-on-food-and-drink-3761-1374483321.jpg');"></li>
        </a>
        </ul>

    <style>
        .custom_listview_img {
            margin:0px; 
            padding:0px;
            background-repeat:no-repeat;
            background-size:100%;
            height:150px;
        }
    </style>