How to flush text to the right in CSS?

Question

I would like to have this

.--------------------------------------.
| Left                           Right |
'--------------------------------------'

One solution (with Bootstrap) is:

<div class="row">
    <div class="col ">
        Left
    </div>
    <div class="col text-right">
        Right
    </div>
</div>

Is there a simpler way such as this?

<div>
Left <span class="hfill">Right</span>
</div>

What version of bootstrap? Are you wanting to omit any bootstrap utility classes? — Chris W., Jan 03 '19 at 22:12
`
Left Right
` ... it takes only 2 properties, though don't use inline styles — Asons, Jan 03 '19 at 22:15
As suggested, float might be the simplest, but more importantly, how do you want those 2 to render when it comes to same height, wrapping etc. When we know that we know what to suggest, making it more about _what needed_ than _simpler_. — Asons, Jan 03 '19 at 22:22
@LGSon, thanks, but the other question you are referring to is not the same. I am asking if there is a simpler way to achieve it with less HTML tags. — nowox, Jan 03 '19 at 22:48
@nowox Questions asking about _"simpler ways"_ are too broad, hence being off topic. The dupe link + comments + answers here would be a good start for you. I also think it is better, from a _"future users"_ perspective, to close as a dupe than as off topic. — Asons, Jan 03 '19 at 22:53
I added one more link to the dupe list, which shows some more built-in classes how to align horizontal. — Asons, Jan 03 '19 at 22:57

score 3 · Accepted Answer · answered Jan 03 '19 at 22:31

using bootstrap 4

<div class="d-flex justify-content-between">
    <div>Left</div>
    <div>Right</div>
</div>

without bootstrap

.someClass {
   display: flex;
   justify-content: space-between;
}

<div class="someClass">
  <div>Left</div>
  <div>Right</div>
</div>

1 Answers1