How to align this span to the right of the div?

Flex right with Flexbox

Flexbox--your layout savior has the powers of bending the parent div and pushing the pesky child span to the dreaded right:

<div style="display: flex;">
  <span>I'm happy here on left</span>
  <span style="margin-left: auto;">Ha! Flexed to the right!</span>
</div>


Here, the second span pities the seat to the right with a margin-left: auto; move, coolly occupying the leftover space.

Summon the position: absolute; within relative div

Make positioning your weapon. Absolute positioning within a relative container is one trick:

<div style="position: relative;">
  <span style="position: absolute; right: 0;">Right-aligned position, confirmed!</span>
</div>


Remember, though it's like an aim-bot precision shot, but it takes span off the regular document flow and can mess up layout dynamics. Proceed with caution.

Targeting specific spans, feeling like a sniper

For multiple spans, call :nth-of-type(), a specific marksmanship:

div span:nth-of-type(2) {
  float: right;
  /* Your second span just took a right, Taxi! */
}


With this CSS rule, you're now a sniper, shifting only the second span of every div to the right!

Taking handling to the next level

Vanilla floats and the magic of clearing

While floating elements may give that sense of gratification, remember to be mindful of overflow issues which could disrupt your layout design. overflow: auto; to the div could be a quick fix you might want to consider:

div {
  overflow: auto;
  /* Floats, beware! */
}


Flexbox for better UX

Though float can feel like a friendly ally, Flexbox stands on the pedestal for its responsive and flexible prowess. Try exploiting display: flex; for superior control and increasing the power level of individual elements with flex: 1;:

div {
  display: flex;
  /* Flex the box */
}
span.first {
  flex: 1;
  /* Making the first span grow like Jack's beanstalk */
}
span.second {
  flex: none;
  /* Second span, stop munching on my space */
}


The browser compatibility playbook

Before you go full out with CSS property fest, do check browser compatibility. Some might not like the hip features like Flexbox or position: absolute. Keep a tab on compatibility checks on Can I Use.