Float 2 elements next to eachother - css

Question

I'm trying to position two elements within an li list next to eachother on the right side to get the result:
Some text.................A...B Unfortunatelly the ordering drives me crazy.
Here's the html code:
<ul class="list">
<li>some text
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
With the following CSS code I was able to get the small-elements on the right side next to each other, but the result is that i see on the right side B next to A!
.list li{
background-color:#282828;
color:#ffffff;
font-size:20px;
text-transform:uppercase;
padding-left:5px;
}
.list small.a {
display:inline;
float:right;
}
.list small.b {
display:inline;
float:right;
}
So, I aim to have:
some tex.....................A...B
but for instance it looks like:
some text....................B...A
See example here --> http://jsfiddle.net/LKVdE/
Thanks upfront for any tip!

Answer 1

Here is the solution: http://jsfiddle.net/surendraVsingh/LKVdE/1/
CSS
.list small.a {
background-color: #000000;
display: inline;
}
.list small.b {
background-color: #ff0000;
display: inline;
}
.list li span{
display: inline-block;
float: right;
}
HTML
<ul class="list">
<li>Brennwert kJ / kcal
<span>
<small class="a">1109kJ / 261kcal</small>
<small class="b">455kJ / 107kcal</small>
</span>
</li>
</ul>
​

Answer 2

A and B should be put in a right floating container:
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
.floatright {
float:right;
}
And
<li>some text
<div class="floatright">
<small class="a">A</small>
<small class="b">B</small>
</div>
</li>

Answer 3

Why does this happen, because first style is applied to a which moves it to to the right, whatever next appears in the markup must now follow a from the right that's why you see BA instead of AB
Markup changes: Include the text inside a span and add float:left to it
<ul class="list">
<li><span class="text">some text</span>
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
Css changes, remove float:right from a and b and add float:left to text
.text{float:left;}
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
Working fiddle: http://jsfiddle.net/LKVdE/8/