Align Inline Element to the Right

Question

How to align two text elements, one to the left and the other to the right, also on the same line. I'm aware it can be done using floats but I would like a float less solution. I'm looking for a way to do it using display:inline.

HTML:

<div class="contailner">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>

CSS:

.container {
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft, .inlineRight {
    display: inline;
}

.inlineRight {
    ...align right...   
}

Answer 1

you could just use position:absolute on the inline elements and position:relative on the container. Then you can align the inline elements the way you want relative to the container. Something like this:

.container {
    position: relative;
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft, .inlineRight {
    position: absolute;
    display: inline;
}

.inlineRight {
    right: 0;
}

DEMO