<div class="container">
  <div class="card">
    <h2>Resize Me</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis laudantium ipsam est pariatur quae sequi facere, amet et ipsum. Hic repellendus fuga deleniti alias laudantium tempora eius animi distinctio officiis.</p>
  </div>
</div>

.container {
  container: my-thing / inline-size;
  background: tan;
  inline-size: 300px;
  min-inline-size: 200px;
  resize: both;
  overflow: hidden;
  
  /* Can't use container units here! */
  
  .card {
    padding: 5cqi;
    font-size: 4cqi;
    border: 1cqi solid brown;
    height: 100%;
  }

  h2 {
    font-size: 10cqi;
    margin-block: 0 3cqi;
  }
}
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
html {
  font-family: system-ui, sans-serif;
  line-height: 1.4;
}
* {
  box-sizing: border-box;
}