Reverse list with float right and left

Question

What I want to achieve is the following:

| foo                      bar  baz  bam |

i.e. having the first element of a list floating to left and consecutive elements in that list aligned to the right. I've attached of snippet of my attempt, which doesn't quite yield what I need.

ul li {
  display: inline;
  float: right;
  margin-right: 3vw;
  margin-bottom: 5vh;
}

<ul>
  <li>foo</li>  
  <li>bar</li>  
  <li>baz</li>  
  <li>bam</li>  
</ul>

Answer 1

<ul>
 <li><span style="padding-right: 10px;">|</span>foo</li>  
 <li>bam<span style="padding-left: 10px;">|</span></li>
 <li>baz</li>
 <li>bar</li>
</ul>
ul li {
  display: inline;
  float: right;
  margin-right: 3vw;
  margin-bottom: 5vh;
}
ul li:first-child {
  float: left;
}