title: CSS Align Span to right of list?
body: <h1>HTML</h1>
  <pre><code>&lt;ul class=&quot;list-group&quot;&gt;
      &lt;li class=&quot;list-group-item normal-row&quot;&gt;TEST TEXT &lt;span class=&quot;cross&quot;&gt;✘&lt;/span&gt;&lt;/li&gt;
      &lt;li class=&quot;list-group-item normal-row&quot;&gt;TEST TEXT &lt;span class=&quot;rtr_symbolcross&quot;&gt;&lt;span class=&quot;tick&quot;&gt;✔&lt;/span&gt;&lt;/li&gt;
      &lt;li class=&quot;list-group-item normal-row&quot;&gt;TEST TEXT TEST TEXT TEST TEXT&lt;span class=&quot;cross&quot;&gt;✘&lt;/span&gt;&lt;/li&gt;
      &lt;li class=&quot;list-group-item normal-row&quot;&gt;TEST TEXT TEST TEXT&lt;span class=&quot;tick&quot;&gt;✔&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <h1>CSS</h1>
  <pre><code>.tick {
      text-align: right;
  }
  .cross {
      text-align: right;
  }
  </code></pre>
  <p><a href="https://jsfiddle.net/ewgp3oxL/" rel="noreferrer">https://jsfiddle.net/ewgp3oxL/</a></p>
  <p>How can I make the above, look like:</p>
  <p><a href="https://i.stack.imgur.com/jT5Kb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jT5Kb.png" alt="enter image description here" /></a></p>
  <p>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</p>
  <p>I'm using a span because I also apply color, background color, font-size, font-weight,  shadow... and some other stuff.</p>