title: Layout of 3 DIVs, where 2 are in one column
body: <p>I am trying to make something like this:</p>
  
  <pre><code>|--------------------------------------------------------|-------------|
  |                                                        |             |
  |                    DIV 1                               |             |
  |                                                        |    DIV 3    |
  |--------------------------------------------------------|             |
  |                    DIV 2                               |             |
  |--------------------------------------------------------|-------------|
  </code></pre>
  
  <p>I can't use a table for this. And I don't know if there's a way to just let them stack like that? </p>
  
  <p>I tried it with the code below, but DIV 3 is not all the way at the top. It is actually exactly div2.height lower from the top.</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>#DIV_1 {
    height: 125px;
    width: 80%;
    display: block;
    float: left;
  }
  #DIV_2 {
    width: 80%;
    height: 15px;
    display: block;
  }
  #DIV_3 {
    display: block;
    float: left;
    height: 140px;
    width: 20%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row" style="width: 1024px; height: 140px;"&gt;
    &lt;div&gt;
      &lt;div id="DIV_1"&gt;&lt;/div&gt;
      &lt;div id="DIV_2"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="DIV_3"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>