CSS Align the area to the right of the 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 do the above, look like this:

So, as you can see, ticks and crosses are completely right, the css I tried does nothing for: S

I use span because I also apply color, background color, font size, font size, shadow ... and some other things.

Answer 1

Change the position of the range 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

Answer 2

Use float instead of text-align

.tick {
    float: right;
    clear: both;
}
.cross {
    float: right;
    clear: both;
}

Working fiddle - https://jsfiddle.net/1xmxncLr/

Answer 3

flexbox.

li {
  display: flex;
  justify-content: space-between;
}

<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>

Hide result

Answer 4

text-align , , , , , .

Flexbox , , Paulie_D , , :

li{
  position:relative;
}
span{
  position:absolute;
  right:0;
  top:0;
}

<ul>
  <li>TEST TEXT <span>✘</span></li>
  <li>TEST TEXT <span>✔</span></li>
  <li>TEST TEXT TEST TEXT TEST TEXT<span>✘</span></li>
  <li>TEST TEXT TEST TEXT<span>✔</span></li>
</ul>

Hide result

Answer 5

td text-align: right

Answer 6

, , :

.tick {
    position: fixed;
    right: 0; }
.cross {
    position: fixed;
    right: 0; }