Align Inline Element to the Right - css

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

Answer 2

UPDATE - 2019, April
We can also work with css flex.
div.flex-box {
display: flex;
justify-content: space-between;
border: 2px deeppink dashed;
}
<div class="flex-box">
<span>span element 1</span>
<span>span element 2</span>
</div>
PREVIOUS ANSWER
We can achieve this with display:table:
.container {
border: 2px blue dashed;
display: table;
width: 100%;
/*MARGIN (NOT REQUIRED)*/
margin: auto;
margin-top: 100px;
width: 500px;
}
.inlineRight {
display: table-cell;
text-align: right;
}
.inlineLeft {
display: table-cell;
text-align: left;
}
<div class="container">
<div class="inlineLeft">Item 1</div>
<div class="inlineRight">Item 2</div>
</div>
Good Luck...

Answer 3

add this to your css
.inlineLeft, .inlineRight {
display: inline-block;
}
.inlineRight {
display:inline-block;
position:absolute;
right:0;
margin-right:8px;
}
Demo

Answer 4

Why are you doing it like this?
You can easily have the same result with an un-ordered list without those extra divs.
Make sure you set the text-align property for the first list item to "left" (ul li:first-child), and set the text-align property for the other list items (ul li) to "right".
UPDATE - Here's the code for this as requested:
HTML
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
CSS
ul{
padding: 0 0;
margin: 0 0;
list-style: none;
width: 600px;
border: 1px solid blue;
height: 30px;
}
ul li{
width: 300px;
display: block;
float: left;
text-align: right;
line-height: 30px;
}
ul li:first-child{
text-align: left;
}
DEMO

Answer 5

You could use text-align:justify + after pseudo element to justify that first line:
http://codepen.io/anon/pen/JeAgk
.contailner {
line-height:0;
text-align:justify;
background:lightgray;
margin:1em;
}
.contailner > * {
display:inline-block;
line-height:1.2em;
}
.contailner:after {
content:'';
display:inline-block;
width:99%;
vertical-align:top;/* or bottom to swallow last gaps */
}
/* some extra possibilities */
ul {padding:0;margin:0;}
.w3 {padding-left:1%;}
.w3 .box {margin:1% 1% 1% 0; border:solid;width:31%;text-align:center;box-shadow:0 0 5px;}
.w3 .w5 {width:48%;}
.w3 .w15 {width:14%;}
.w3 .w25 {width:23%;}
<div class="contailner">
<div class="inlineLeft">Item 1</div>
<div class="inlineRight">Item 2</div>
</div>
<div class="contailner">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>
<ul class="contailner">
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
</ul>
<div class="contailner w3">
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
</div>
<div class="contailner w3">
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
</div>
.contailner {
line-height:0;
text-align:justify;
}
.contailner > div {
display:inline-block;
line-height:1.2em;
}
.contailner:after {
content:'';
display:inline-block;
width:100%;
}
If you use an extra empty element instead of pseudo-element, then you have a technic that is usable since text-align:justify exists, wich means compatible with any browsers.
Edit 2020
For simple inline elements , nowdays , text-align-last works with every browsers. , the pseudo element can be dropped.
.contailner {
text-align: justify;
text-align-last: justify;
background: lightgray;
margin: 1em;
}
.contailner>* {
display: inline-block;
}
/* some extra possibilities */
ul {
padding: 0;
margin: 0;
}
.w3 {
padding-left: 1%;
}
.w3 .box {
margin: 1% 1% 1% 0;
border: solid;
width: 31%;
text-align: center;
box-shadow: 0 0 5px;
}
.w3 .w5 {
width: 48%;
}
.w3 .w15 {
width: 14%;
}
.w3 .w25 {
width: 23%;
}
<div class="contailner">
<div class="inlineLeft">Item 1</div>
<div class="inlineRight">Item 2</div>
</div>
<div class="contailner">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>
<ul class="contailner">
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
</ul>
<div class="contailner w3">
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
</div>
<div class="contailner w3">
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w5">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w15">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
<div class="box w25">
<header>header</header>
<article>Article</article>
<footer>footer</footer>
</div>
</div>
also, nowdays
there is flex and space-between to easily do the job and to use if it is to build a grid layout.
text-align/text-align-last should be used only for its original purpose : text alignment, not a workaround to something else.
So what would you choose for a nav ?
.txt {
text-align-last: justify
}
/* or ? */
.flx {
display: flex;
justify-content: space-between;
}
<nav class="txt">
Link Link Link
</nav>
<nav class="flx">
Link Link Link
</nav>