title: When float two elements right they switch positions
body: <p>I need to position two of my elements on the right hand side of the parent element, however, when using the <code>float: right</code> property, it makes the elements to switch positions. </p>
  
  <p>I had a look at this thread: <a href="https://stackoverflow.com/questions/11249380/prevent-right-floated-elements-from-swapping">Prevent Right Floated Elements from Swapping</a> however, adding the <code>display: inline-block</code> and <code>text-align: right</code> didn't solve the problem.</p>
  
  <p>Here is a </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="element1"&gt;1&lt;/div&gt;
    &lt;div class="element2"&gt;2&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My desired result would be blue element followed by yellow element.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>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.</p>