title: Divs are overlapping, how to fix? CSS
body: <p>I want to position two divs next to each other which are below one another otherwise.</p>
  
  <pre><code>Div 1 Div 2
  ----  ----
  |  |  |  |
  |  |  |  |
  ----  ----
  </code></pre>
  
  <p>What ends up happening though with my code so far is that they overlap similar to this:</p>
  
  <pre><code>-----
  || ||
  || ||
  -----
  </code></pre>
  
  <p>This is my code so far:</p>
  
  <pre><code>@media screen and (min-width: 40rem) and (max-width: 60rem) {
      #div1 {
          position: absolute;
          left: 0px;
      }
      #div2 {
          position: absolute;
          right: 0px;
      }
  }
  </code></pre>
  
  <p>As you can see I want to place the div #div2 on the right, while the other one stays on the left.
  Also I want this to happen only when the browser window is between 40 and 60 rem width.</p>
  
  <p>But with my code they overlap. I want them to be placed neatly side by side.</p>
  
  <p>Would be great if I could get some help.</p>