Weird line-break in span

For some reason, the following HTML snippet wraps the % sign onto a new line (FireFox only):

<span class="label">
    <input type="radio" />
    <span>
        <span>1,22</span>
        <span>%</span>
        <br />
   </span>
</span>

And css:

.label {display: inline-block;}

Its a snippet, so it doesn't make much sense on its own, but I don't understand why this is happening, I think its valid HTML5. Can someone explain what the problem is with this snippet, because it works in Chrome and not in FireFx ?

DEMO