текст навигационной панели с глификом сверху друг от друга, а не рядом друг с другом

Question

Я создал навигационную панель, и я хотел бы видеть имя с маленькой стрелкой рядом с ним.

Вот код:

<nav class="nav navbar-nav pull-right">
  <ul class="navbar-right">

    <!-- Logged in user and drop down -->
    <li class="nav-item dropdown" style="padding-left: 15px; padding-right: 15px;">
      <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="navbarDropdown">
        <div class="row">
          <span>{{ Auth::user()->name }}</span>
          <span class=" fa fa-angle-down"></span>
        </div>
      </a>
      <ul class="dropdown-menu dropdown-usermenu" aria-labelledby="navbarDropdown">
        <li><a href="{{ route('profile',Auth::user()->id) }}">Profile</a></li>
        <li><a href="{{ route('help') }}">Tutorial</a></li>
        <li><a id="logout"><i class="fa fa-sign-out pull-right"></i>Log Out</a></li>
      </ul>
    </li>

  </ul>
</nav>

Так что имя хорошо на справа, но стрелка находится ниже названия, когда я хотел бы получить его справа от имени.

Примерно так:

John Doe v

Но вместо этого у меня есть:

John Doe
       v