Is there a way to vertically align small captions on the right side of a dropdown menu, next to each item's text? The issue is that in the example below, the numbers are not properly aligned.
https://i.stack.imgur.com/NZigW.png
The numbers 123 and 12345 appear at the top instead of being aligned with their respective lines. Additionally, 1234567 wraps to a new line which is undesirable.
I was able to achieve the desired effect without using Bootstrap, but incorporating it into the code causes problems. Unfortunately, platforms like jsfiddle stretch the example width when inputting the code, making it difficult to pinpoint the issue. Here is the code snippet:
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.ih {
font-size: 85%;
float: right;
}
.name {
float:left;
}
</style>
</head>
<body>
<ul class="nav navbar-nav">
<li class="dropdown open">
<ul class="dropdown-menu" id="a">
<li>
<a href="#">
<div class="name">blah blah</div>
<div class="ih">123</div>
</a>
</li>
<li>
<a href="#">
<div class="name">short</div>
<div class="ih">12345</div>
</a>
</li>
<li>
<a href="#">
<div class="name">really really really long</div>
<div class="ih">1234567</div>
</a>
</li>
</ul>
</li>
</ul>
</body>