title: two divs inside a container ovelayed
body: <p>I have a container DIV that has two DIVs inside. The first DIV (my-canvas) needs to be positioned absoulte at 0 0 inside the container. I want the second DIV to take up the remaining 50% of space below. The finished product needs to be responsive. I am stuck on how to position the second DIV.</p>
  
  <p>I have the following HTML:</p>
  
  <pre><code>&lt;div class="container map-container"&gt;
      @include('maps.world-map')
      &lt;div id="my-canvas"&gt;&lt;/div&gt;
      &lt;div id="their-canvas"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS is:</p>
  
  <pre><code>.map-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 1728px;
    max-height: 1080px;
    overflow: hidden;
    margin: 50px auto 0 auto;
  }
  
  #my-canvas,
  #their-canvas {
    padding: 0;
    text-align: center;
    position: absolute;
    max-width: 1728px;
    max-height: 540px;
    width: 100%;
    height: 50%;
    z-index: 999998;
    opacity: 0.8;
  }
  #my-canvas {
    left: 0;
    top: 0;
  }
  </code></pre>
  
  <p>I am trying to figure out the CSS for the canvas below</p>
  
  <pre><code>#their-canvas {
    ????
  }
  </code></pre>
  
  <p>Thanks!</p>