Question

Using CSS what is the best way to have text on both the right and the left side of an element and be in the same spot vertically?

Thus ending up with the following layout:

The container has a fixed width, so I don’t want to use positioning, because I know I don’t have to.

Answer 1

(1) Add two divs within the element that contain each text string

<div>
    <div class="div1">Left Text</div>
    <div class="div2">Right Text</div>
</div>

(2) Float the two divs next to each other

.div1 {
    float: left;
}

.div2 {
    float:right;
}

(3) Set the text-align properties for the right div (this will ensure that the text is pushed all the way to the right as in your example).

.div2 {
    float:right;
    text-align: right;
}