Невозможно "вытащить правый" значок в бутстрапе

Я хочу вытащить значок правильного значка в раскрывающемся меню, как показано ниже

<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>

Но когда я запускаю этот код в FireFox (Chrome и IE - oke), "icon-arrow-right" и "2-level Dropdown" не совпадают. Как я могу это исправить?

Полный код JSFIDDLE

Ответ 1

Решение от cetver работает хорошо для меня.

Для записи, хотя, здесь другой способ получить те же результаты:
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;
}

Ответ 2

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

jsfiddle