text align right in a span

Its contained inside a block element so add "float: right" to those spans to get your right alignment =).

Edit. Someone shot down the float idea in a now deleted comment. Floating does present some layout ugliness for when your text on the left becomes too large. You could instead use a fancy flex solution that will hold up across different context a bit better.

For flex, set the anchor to "display: flex" and the span to "flex: 1; text-align: right; white-space: nowrap;".

You can try this:-

 float:right;