Jquery Mobile - Display Icon With Bubble Count

Jquery Mobile - Display Icon With Bubble Count

In this JSFiddle, the goal is to display a bubble count next to each icon.
When attempting to display 2 successive icons with bubbles, the icons are
floating left and grouping together.
What CSS is required to display bubble counts immediately after each icon?
HTML
<div style="display: inline-block; white-space: nowrap">
<a href="#" class="ui-nav-icon" data-role="button" data-icon="alert"
data-iconpos="notext">Alerts</a>
<span class="nav-icon ui-li-count ui-btn-up-c ui-btn-corner-all"
style="font-size:10px;position:static">42</span>
<a href="#" class="ui-nav-icon" data-role="button" data-icon="info"
data-iconpos="notext">Information</a>
<span class="nav-icon ui-li-count ui-btn-up-c ui-btn-corner-all">173</span>
</div>
CSS
a.ui-nav-icon {
float: left
}
span.nav-icon {
font-size:11px
}