How can I make a transition for appending a child which increases the offset height in HTML, JS, or CSS?

When I try to append a child to an element, it increases the offset height of the element. Even when a transition is used, it just appends the child instantly. I just want to make a transition for that.

const p = document.createElement("p");
p.innerText = "Sample text";
document.getElementById("main").appendChild(p);

div#main {
  transition: all 0.5s ease;
}

<div id="main"></div>