Q:

Left- and right-aligned text on the same line in a Bootstrap dropdown

It's common for menus on desktop apps to show the name of the action on the left and the keyboard shortcut on the right, like this. 
I want to do the same thing in a Bootstrap dropdown.  However, I can't seem to get it to work.  I've tried several things.  Here is the code for the two closest tries and a link to a demo. 
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 1 <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Label</a></li>
      <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Long long long long long label</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 2 <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#"><span class="pull-left">Label</span><span class="text-muted pull-right">Alt+P</span></a></li>
      <li><a href="#"><span class="pull-left">Long long long long long label</span><span class="text-muted pull-right">Alt+P</span></a></li>
    </ul>
  </li>
</ul>

Again, here's a link to a demo. 
Both Try 1 and Try 2 work for short labels, but not for long labels. 
With Try 1, the problem is that the label and the shortcut overlap. 
With Try 2, the problem is that the shortcut gets pushed to another line, and there is also some weirdness with hovering over the items. 
What I want is for it to all be on one line, so you see something like this (that image is just a fake that I made in GIMP). 

A:

I tried many ways to get the result with Bootstrap classes, but I think you'll need a bit of custom CSS.  Here is an example :
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown menu <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Label <span class="kbd text-muted">Alt+S</span></a></li>
        <li><a href="#">Not labeled</a></li>
        <li><a href="#">Long long long long long label <span class="kbd text-muted">Alt+L</span></a></li>
      </ul>
    </li>
  </ul>

.dropdown-menu > li > a {
    position: relative;
    padding-right: 70px;
}
.dropdown-menu > li > a > span.kbd {
    position: absolute;
    right: 20px;
    top: 3px;
}

Updated Bootply

