CSS - Horizontally split page in two halves without overlapping
<p>I am trying to split my html page in two halves (60% top half, and 40% bottom half) However, to my surprise, I am having a hard time doing so without having my content overlap when the browser window resize. I tried flex, absolute positioning, percentages...</p>

<p>What I have is this</p>

<p><strong>HTML</strong>
    </p>

<pre><code>   &lt;div class="top"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   &lt;/div&gt;

   &lt;div class="bottom"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>html, body {
   height:100%;
   padding:0;
   margin:0;
}
.container {
   height:100%;
}
.top {
   height:60%;
   background:red;
}
.bottom {
   height:40%;
   background:yellow;
}
</code></pre>

<p>This works well. </p>

<p><a href="https://i.stack.imgur.com/LfXCJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LfXCJ.png" alt="enter image description here"></a></p>

<p>However, when the page is resized, the top part overlaps the bottom part. </p>

<p><a href="https://i.stack.imgur.com/haHzv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/haHzv.png" alt="enter image description here"></a></p>

<p>How can I make it so the two halves are aware of content height and not overlap? I don't want to set height in pixels. I am open to JavaScript only if there is absolutely no solution with CSS only</p>

<p><a href="https://jsfiddle.net/8tvn0kw6/1/" rel="nofollow noreferrer">FIDDLE</a></p>