Nav bar dropdown link with multiple text alignments (Bootstrap) - html

Question

I'm trying to make a navigation drop down (using Bootstrap 3) where the link text has multiple different alignments on the same line.
In the code below, the links in Dropdown A have spaces characters in the HTML to align them, but the white space is ignored (I'm aware this is also bad semantically).
I am trying to get my navigation menus to be like Dropdown B and Dropdown C, but with white space instead of periods.
In Dropdown B, there is a first part (Foo) that is left-aligned, and then a second part (Bar) that is left-aligned, but with a simulated tab character between.
In Dropdown C, there is a first part (Foo) that is left-aligned, and a second part (Bar) that is right-aligned and with a simulated tab character between.
I've tried putting Foo in a span and Bar in a different span and then using either floats or text aligns to move them, but all the different things I've tried either result in the Bar part floating off the menu or dropping down onto a new line (which looks terrible).
How do I make my dropdowns look like Dropdown B and Dropdown C with semantically good HTML and CSS?
(Note: Interactive code illustrates my point much better in full screen)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<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="#">My Site</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li class="dropdown">
Dropdown A <span class="caret"></span>
<ul class="dropdown-menu">
<li>Foooooooo Baaaaar</li>
<li>Foo Bar</li>
</ul>
</li>
<li class="dropdown">
Dropdown B <span class="caret"></span>
<ul class="dropdown-menu">
<li>Foooooooo........Baaaaar</li>
<li>Foo....................Bar</li>
</ul>
</li>
<li class="dropdown">
Dropdown C <span class="caret"></span>
<ul class="dropdown-menu">
<li>Foooooooo........Baaaaar</li>
<li>Foo............................Bar</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

There are probably a number of ways to do it but this seems to work:
Your LI would look like this:
<li><div style="width:100%"><div class="col-xs-6 navItem leftItem">Foooooooo</div><div class="col-xs-6 navItem rightItem">Baaaaar</div></div></li>
The CSS for the entries are like this:
.navItem{
display:inline;
padding:0;
}
.leftItem{
text-align:left;
}
.rightItem{
text-align:right;
}