Can not "pull-prawo" ikony glif w bootstrap

Question

Chcę wyciągnąć właściwą ikonę glif w rozwijanego menu jak poniżej

<div class="navbar"> 
    <div class="navbar-inner"> 
    <ul class="nav"> 
     <li class="dropdown"> 
     <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li> 
      <a href="#">2-level Dropdown <i class="icon-arrow-right pull-right"></i></a> 
      <ul class="dropdown-menu sub-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Another action</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

Ale gdy uruchamiam ten kod na Firefox (Chrome i IE są oke), "ikona-strzałka-prawo" i "2-poziomowe menu rozwijane" to nie ta sama linia. Jak mogę to naprawić?

Full code on JSFIDDLE

Answer 1

Rozwiązanie z cetver działa dobrze dla mnie.

Dla przypomnienia chociaż, oto kolejny sposób, aby uzyskać te same rezultaty:
http://www.bootply.com/70536

HTML

<a href="#"><i class="icon-arrow-right"></i> 2-level Dropdown</a> 

CSS

.icon-arrow-right { 
float: right; 
margin-top: 2px; 
margin-right: -6px; 
} 

Answer 2

<a href="#" style="overflow: hidden;"> 
    <span class="pull-left">2-level Dropdown</span> 
    <span class="icon-arrow-right pull-right"></span> 
</a> 

jsfiddle