JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <ul>
      <li class="dropdown">
      <a href="#" class="" data-toggle="dropdown"><span                                  
      id="hello"><em>User Name</em></span>
      <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><i class="icon-arrow-up"></i><a href="#">Logout</a></li>
        <li><i class="icon-arrow-down"></i><a href="#">Update Profile</a>   
         </li>
       </ul>
       </li>
      </ul>

CSS

.dropdown-menu a {
       white-space:normal;
       left: 1000px;
       padding-bottom: 100px;
       }

      .dropdown-menu > li{position:relative;}

      .dropdown-menu > li > i{position:absolute;left:0;top:3px;}

ul li.dropdown:hover .dropdown-menu
{
  display:block;
}
ul
{
  list-style: none;
}