title: Float two divs left and one right
body: <p>My code structure looks like this </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="height: 100px;
              Width: 200px;"&gt; &lt;!-- Container --&gt;
    &lt;div style="float: left;
                height: 50px;
                Width: 100px;
                background-color: red;"&gt;
    &lt;/div&gt;
    &lt;div style="float: left;
                height: 50px;
                Width: 100px;
                background-color: blue;"&gt;
    &lt;/div&gt;
    &lt;div style="float: right;
                height: 50px;
                Width: 100px;
                background-color: green;"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the right position of elements should look like this:</p>
  
  <pre class="lang-none prettyprint-override"><code>┌──────┬──────┐
  │ red  │green │
  ├──────┼──────┘
  │ blue │
  └──────┘
  </code></pre>
  
  <p>I cannot change or add any additional code, the only way is with CSS. 
  How should I float the divs to be in the right order as I mentioned above?</p>
  
  <p>Edit: My code doesn't and can't contain div with clear.</p>