JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dynamic">
  <span>Title</span>
  <div class="card">
     <p>I break things!</p>
   </div>
</div>
<br>
<div class="dynamic">
  <span>Title</span>
  <div class="card">
    <p class="fix">I don't break things!</p>
   </div>
</div>

CSS

div {
  //overflow: auto;
}

.card {
  background: orange;
  height: 10rem;
  margin-bottom: 1rem;
  //margin-top: 1rem;
}

.dynamic {
  background: yellow;
  height: fit-content;
}

.fix {
  margin: 0;
}