title: Align div to right, without using float
body: <p>I want the outcome on the  pictures where the 3 bubbles are underneath each other - however when I do this with float, the third and last element aligns with the second that holds the float. How do I make it float right, without having the 3rd element align?</p>
  
  <p><a href="https://i.stack.imgur.com/YNNW3m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YNNW3m.png" alt=""></a>
  <a href="https://i.stack.imgur.com/35eEfm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/35eEfm.png" alt=""></a></p>
  
  <p>html: </p>
  
  <pre><code>&lt;section class="javascript"&gt;
      &lt;div class="js-wrapper"&gt;
          &lt;h3&gt;JAVASCRIPT&lt;/h3&gt;
      &lt;/div&gt;  
  &lt;/section&gt;
  &lt;section class="javascript"&gt;
      &lt;div class="js-wrapper2"&gt;
          &lt;h3&gt;JAVASCRIPT&lt;/h3&gt;
      &lt;/div&gt;  
  &lt;/section&gt;
  &lt;section class="javascript"&gt;
      &lt;div class="js-wrapper3"&gt;
          &lt;h3&gt;JAVASCRIPT&lt;/h3&gt;
      &lt;/div&gt;  
  &lt;/section&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre class="lang-css prettyprint-override"><code>.js-wrapper {
     background-color: #8E8ABC;
     border-bottom-right-radius: 12em;
     border-top-right-radius: 12em;
     width: 40%;
  }
  .js-wrapper2 {
     background-color: #8AACBA;
     border-bottom-left-radius: 12em;
     border-top-left-radius: 12em;
     width: 40%;
     float: right;
  }
  .js-wrapper3 {
     background-color: #76B783;
     border-bottom-right-radius: 12em;
     border-top-right-radius: 12em;
     width: 40%;
  }
  </code></pre>