CSS Align Span to right of list?

Question

HTML

<ul class="list-group">
    <li class="list-group-item normal-row">TEST TEXT <span class="cross">✘</span></li>
    <li class="list-group-item normal-row">TEST TEXT <span class="rtr_symbolcross"><span class="tick">✔</span></li>
    <li class="list-group-item normal-row">TEST TEXT TEST TEXT TEST TEXT<span class="cross">✘</span></li>
    <li class="list-group-item normal-row">TEST TEXT TEST TEXT<span class="tick">✔</span></li>
</ul>

CSS

.tick {
    text-align: right;
}
.cross {
    text-align: right;
}

https://jsfiddle.net/ewgp3oxL/

How can I make the above, look like:

So as you can see the ticks and crosses are all the way over at the right hand side, the css that I've tried does nothing to :S

I'm using a span because I also apply color, background color, font-size, font-weight, shadow... and some other stuff.

Answer 1

Change span position to absolute and right to 0px.

Here you can change the space between the cross/tick and the text.

li{
    position:relative;
    width:600px;
}
.cross, .tick {
    position:absolute;
    right:0px;
}

JSFidle