During a transition, how do I stop the animated content from overlapping other elements which instantly snap into place?

Explanation

I found this question a bit hard to word, but the easiest way to see what I’m talking about is by checking out the CodePen that I made.

As you can see, the text content, which is animated, briefly overlaps the div below which is instantly moving into the new position. Is there any way I can avoid this?

CSS

p{
  width:400px;
}

hr{
  width:400px;
  margin-left:0px;
}

.section{
  width:400px;

  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  transform: scaleY(1);
  transform-origin: top;

  &.closed{
    transform: scaleY(0);
    height: 0;
  }
}

HTML

<button onclick="toggle()">Toggle</button>
<hr/>
<p>Text</p>
<hr/>
<div id="section" class="section">
  <p>Lorem ipsum....</p>
</div>
<hr/>
<p>Text</p>
<hr/>
<div class="section">
  <p>Lorem ipsum...</p>
</div>

If you have fixed height of your text block you can animate it from Xpx to 0px, if you don’t know the height of text, you can do a trick with max-height:

example max-height: 1000px aniamte to max-height: 0;

There can be inconsistency with animation duration between different text blocks, but you can find something middle, which can be hardly noticeable.