CSS how to align one word left and another word right within the same div?

Question

How to align one word left and another word right within the same div?

Answer 1

Solution 1:

HTML:

<div>
    <div class="left">left text</div>
    <div class="right">right text</div>
</div>

CSS:

.left {
    float: left;
}
.right {
    float: right;
}

---

Solution 2:

HTML:

<div>
    <div class="left">left text</div><!-- no space here
 --><div class="right">right text</div>
</div>

CSS:

.left {
    text-align: left;
}
.right {
    text-align: right;
}
.left, .right {
    display: inline-block;
    width: 50%;
}