Give span height of 100% in a li

At the time my html gives this output:

enter image description here

But i would like to have it like this:

enter image description here

So how you can see i tried to add a span where the number has its space. I gave this span the class:

.spanContainer{
  height:100%;
  padding-right:15px
}

But somehow the height:100% gives me not the desired effect! What should i do? Thanks http://jsfiddle.net/52VtD/3398/

<ul class="list-group">
  <li class="list-group-item">
      <span class="spanContainer">
          <a class="text-success">02401</a>
      </span>
      H2-Atemtest
  </li>
  <li class="list-group-item">
      <span class="spanContainer">
          <a class="text-success">03241</a>
      </span>
      Computergestützte Auswertung eines kontinuierlich aufgezeichneten Langzeit-EKG von mindestens 18 Stunden Dauer
  </li>
</u l>

solution

Just float the .spanContainer element to the left and change the display of the text element to table. The reason this works is because floated elements are essentially taken out of the flow, while the .spanText will fill the remaining area, functioning as desired.

EXAMPLE HERE

.spanContainer {
  float:left;
  padding-right:15px;
}
.spanText {
  display: table;
}

It’s worth noting that display:table isn’t supported in IE7 and lower.