Aligning Four Objects in a Row Options

[Yisrael Harris]

I am very new to table-less css. I would like to accomplish the following with table-less css:

I have 4 elements that I want displayed:

1. A small icon.
2. Three words of text.
3. Three more words of text.
4. Another small icon.

I want them displayed as follows:

A. All 4 elements lined up horizontally, within a width of, say, 500 pixels.
B. Items 1 & 2 to be left-aligned and items 3 & 4 to be right-aligned.
C. The space between item 1 & 2 and between item 3 & 4 to be exactly 10px.
D. I don't know in advance what the exact text of items 2 & 3 will be, so I don't know exactly what their widths will be.

There should be an easy way to do this, shouldn't there?

[Christian J]

You might put each image+text pair in a P element and float left and right, respectively. Or you can let the icon be a background image to the P, with some padding in the P to give it space. To constrain the width to 500px you might put both Ps in a container DIV, but it's better to make the layout more fluid, e.g. by using a DIV margin in percent.