How to correctly align inline navpills with badge in bootstrap

Question

I have a menu made with stacked navpills on a left pane, where each page when clicked activates some other menu on the right; each pill contains a badge showing some additional context info for itself and what gets opened.

<ul class="nav nav-pills nav-stacked">
  <li><a href="#tab_1" data-toggle="pill">Introduction <span class=
  "badge pull-right">0/2</span></a></li>
  <li class="active"><a href="#tab_4" data-toggle="pill">The effect of fear of humans on ease of handling of pigs <span class="badge pull-right">0/4</span></a></li>
  <li><a href="#tab_2" data-toggle="pill">Questionnaire <span class=
  "badge pull-right">0/4</span></a></li>
</ul>

I have a problem in the wrapping of the pill contents, which I am not able to fix: when the width of the container is resized, the text and badge are wrapped accordingly, but there is a particular width for which only the badge gets wrapped, not the text, and the pill does not increase in height.

I am referring at the third section, second pill, of the following image (jsfiddle here):

What markup/css should I use to keep the badge aligned on the right, while having the text wrapping correctly leaving the space for it?

Answer 1

Put the <span class="badge pull-right">0/4</span> before the text which is inside the <a></a>.

Like this: https://jsfiddle.net/m24ho905/2/

<ul class="nav nav-pills nav-stacked">
  <li class=""><a href="#tab_1" data-toggle="pill"><span class=
  "badge pull-right">0/2</span> Introduction </a></li>
  <li class="active"><a href="#tab_4" data-toggle="pill"><span class="badge pull-right">0/4</span> The effect of fear of humans on
  ease of handling of pigs </a></li>
  <li class=""><a href="#tab_2" data-toggle="pill"><span class=
  "badge pull-right">0/4</span> Questionnaire </a></li>
</ul>