How to have icons on opposite sides in the same line?

I have tried all the answers I can find and can't seem to fix this. I'm trying to have one of the buttons on the left and the other on the right within the same line. I have tried using

<div style="text-align: right;clear:left;">

in either a div or a span tag and taking it out of the unordered list but I still can't seem to get it frustratingly! I think that I could do it by putting them in tables and floating one left and one right but that just seems a messy way to do it and I'm sure there's an easier way I just can't seem to find it. I'd be happy to allocate each a new class and then assign some new CSS to them but I can't seem to make it work that way either.

I have put my JSFiddle here: JSFiddle to illustrate the issue.

<span align="right">
  <ul class="actions">
    <li><a href="salary.html" class="button special icon fa-arrow-left">Salary</a></li>
    <li><a href="courses.html" class="button special icon fa-arrow-right">Courses</a></li>
  </ul>
</span>

Thank you so much for your help,

Solution

Remove the unnecessary span and simply use:

ul.actions li:last-of-type {
  float: right;
}

This leaves the first button totally unaltered, sitting on the left, and floats the second button to far right.