When float two elements right they switch positions - html

Question

I need to position two of my elements on the right hand side of the parent element, however, when using the float: right property, it makes the elements to switch positions.
I had a look at this thread: Prevent Right Floated Elements from Swapping however, adding the display: inline-block and text-align: right didn't solve the problem.
Here is a
.container {
width: 300px;
height: 20px;
background-color: red;
margin: 0 auto;
}
.element1 {
float: right;
height: 20px;
width: 10px;
background-color: blue;
color: white;
padding: 10px;
}
.element2 {
float: right;
height: 20px;
width: 10px;
background-color: yellow;
padding: 10px;
}
<div class="container">
<div class="element1">1</div>
<div class="element2">2</div>
</div>
My desired result would be blue element followed by yellow element.
UPDATE:
I do understand that this is expected behaviour and the second element is send all the way to the right after the first element, and I do know that changing the elements around would fix the problem, however, just wondering if there is a CSS solution for it.

Answer 1

.container {
display: flex;
}
.element4 {
margin-right: auto;
}
.element5 {
margin-left: auto;
}
.container {
width: 300px;
background-color: red;
}
.element {
height: 20px;
width: 10px;
padding: 10px;
}
.element1 {
background-color: blue;
color: white;
}
.element2 {
background-color: yellow;
color: black;
}
.element3 {
background-color: green;
color: white;
}
.element4 {
background-color: gold;
color: black;
}
.element5 {
background-color: magenta;
color: black;
}
.element6 {
background-color: goldenrod;
color: white;
}
<div class="container">
<div class="element element1">1</div>
<div class="element element2">2</div>
<div class="element element3">3</div>
<div class="element element4">4</div>
<div class="element element5">5</div>
<div class="element element6">6</div>
</div>

Answer 2

This is expected behaviour, either switch your elements around in your HTML or use another method of positioning besides float.
It floats the first element first, then it sees the next one and this then needs to be floated over again so it moves past the original one.

Answer 3

use this.
.container{
width: 300px;
height: 20px;
background-color: red;
margin: 0 auto;
position:relative;
}
.element1 {
position:absolute;
right:0;
height: 20px;
width: 10px;
background-color: blue;
}
.element2 {
position:absolute;
right:10px;
height: 20px;
width: 10px;
background-color: yellow;
}
<div class="container">
<div class="element1">
</div>
<div class="element2">
</div>
</div>