Left-, Right-, and Center-Aligned Headings

While implementing a range slider input for a recent project I needed headings for the three available stop-points, one left-aligned, one centered, and one right-aligned. After a bit of verbose HTML and CSS, I refined it several times and settled on the following code.

CSS

.ranges {
    text-align: center;
}

.ranges span:first-child {
    float: left;
}

.ranges span:last-child {
    float: right;
}

HTML

<div class="ranges">  
    <span>Left</span>
    Middle
    <span>Right</span>
</div>  

Photo by Elliott Engelmann at Unsplash