JSFiddle - React, Tailwind, and code Playground

by ShaCP

HTML

<div id="container">
<div class="child">
</div>
</div>
<button id="add-child">
add child
</button>

CSS

#container {
  max-width: max-content;
  max-height: 700px;
  overflow: auto;
  display: grid;
  row-gap: 0.25em;
}

.child {
  width: 300px;
  height: 150px;
  background-color: lightskyblue;
  text-align: right;
}

#add-child {
  position: absolute;
  top: 8px;
  left: 325px;
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 12px;
    background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

JavaScript

const addChildButton = document.querySelector("#add-child");
addChildButton.addEventListener("click", e => {
document.querySelector("#container").innerHTML += `
<div class="child"></div>
`
})