JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button">Add element</button>
<div id="elements"></div>

CSS

.elem {
  background-color: blue;
  margin: 5px;
  animation-duration:0.5s;
  animation-name: slidein;
}


@keyframes slidein {
  from {
    max-height: 0px;
    transform: scale(0);
    opacity: 0;
  }

  to {
    max-height: 1000px;
    transform: scale(1);
    opacity: 1;
  }
}

JavaScript

function addElement() {
  let dynamicHeight = Math.ceil(Math.random() * 30) + 100;
  let newElem = `<div class='elem' style='height: ${dynamicHeight}px'></div>`;
  let elements = document.getElementById("elements");
  elements.insertAdjacentHTML("afterbegin", newElem);
}

let button = document.getElementById("button")
button.addEventListener("click", addElement);