text on left and right side of element

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:
enter image description here

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

2 Answers

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

<div> <div>Left Text</div> <div>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;
}

You can place your two items inside the same container and float them into the right position.

So you might have something like:

<div> <div>Item 1</div> <div>Item 2</div>
</div>

and CSS:

.container{width:500px;}
.item1, item2{width:200px;}
.item1{float:left;}
.item2{float:right;}

Example: