How to I have a <span> within a <li> align to the right side of the <li>

Question

I have a span of the class 'label' from the bootstrap framework. I have this label nested within a <li> and I would like it to align right of the rest of the content in the <li>.

Before I try to modify the css my li's look like this (the orange 'new item' is the label):

If I try float: right the label moves to the right, but is at the upper right corner of the <li> as seen here:

You can also see the new item label gets pushed to the next line in one situation - I think that is an unrelated problem.

Any tips on how to get my 'new item' span to move to the right of my <li> ? Here is a link to a page I have hosted for demonstration purposes: a

Answer 1

Giving class label margin seems to help:

span.label {
  float: right;
  margin: 10px;
}