CSS: Left-align and right-align text on the same line

Question

Stack Overflow has questions asking how to both left-align and right-align text on 1 line. I couldn't find an answer that works for multi-line text.

---

How do I right-align an inline element on its own line within a paragraph of text that wraps around multiple lines? When the inline element is in the middle of a line, it should skip past the text in its way and be at the end of the current line.

Example Code:

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    <span class="lil-green"></span>
    elit. Pellentesque in vestibulum purus, et pharetra tellus. Etiam et ague tortor.
    <span class="lil-red"></span>
</p>

Simple Mockup

The solution should work even when the text container element is resized.

Answer 1

This is exactly what the float property is for. Use float: right inside the rule of that element. You can learn more about the float property at MDN's article

right

The element must float on the right side of its containing block.

Float makes text wrap around an image or other element.