Bootstrap navbar adjust div margin that is next to dynamic div - html

Question

I have a div that does not collapse in mobile view (always visible), but it is causing issues on larger displays when collapsible-links are present (as shown below).
Is there a way to make the collapsible links appear to the left of dynamic (userInfo) div? Trying to find a css solution, so angular/javascript would be the last resort.
Examples of desired effect:
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href=""><img src="http://placehold.it/599x255&text=Logo"></a>
<h4 class="navbar-text" id="navbarTitle">This is my navbar title</h4>
<ul class="nav" id="userInfo"> <!-- Dynamic -->
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<span class="glyphicon glyphicon-user icon-right"></span><b>{{empName}}</b>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-log-out icon-right"></span>Logout </li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-log-out icon-right"> Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</li>
<!--<li><span class="glyphicon glyphicon-log-out icon-right"></span>Logout</li>-->
</ul>
</div>
Plnkr Demo || JSFiddle Demo
Edit (End-result rephrasing):
I would like the links inside the div with class 'nav navbar-nav navbar-right' to always be left of the div with id 'userInfo'.