Give a span height of 100% per sheet

Question

At the time when my html gives this output:

But I would like to have it like this:

So, as you can see, I tried to add spanwhere the number has its space. I gave this range to the class:

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

But for some reason it height:100%does not give me 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>
</ul>

Answer 1

Just place the item to the .spanContainerleft and change the display of the text item to table. The reason for this is because the floating elements are essentially taken out of the stream, and .spanTextfills the remaining area, functioning as desired.

EXAMPLE HERE

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

, display:table IE7 .

Answer 2

<span> height .

, span block , height.

height , . .

MDN:

, . (.. ), , auto. .

height <span> <span> , margin-left :

.spanContainer{
   /* height:100%; 
   padding-right:15px  */
    float: left;
}

.list-group-item p {
    margin: 0;
    margin-left: 50px;
}