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...   
}
css
Edit
Report