<p class="fit-to-width">
  <span class="big">Hello</span>
  <span class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime aut eos aperiam hic harum deserunt, molestiae ullam aspernatur et adipisci, facilis, recusandae vel obcaecati quia quos ut esse. Eaque, dignissimos?</span>
</p>
/* CSS Trick = https://kizu.dev/fit-to-width-text/ */
@supports (animation-range: entry-crossing) {
  .fit-to-width {
    .big {
      font-size: 20rem; /* max-font-size */
      inline-size: max-content;
      line-height: 1.1;
      transform-origin: 0 0;
      animation: apply-text-ratio linear;
      animation-timeline: view(inline);
      animation-range: entry-crossing;
      display: block;
      text-indent: -3%;
    }
  }
}

@keyframes apply-text-ratio {
  from {
    scale: 0;
    margin-block-end: -1lh;
  }
}

.fit-to-width {
  width: 280px;
  margin-inline: auto;
  margin-block-start: 0;
  overflow: hidden;
  resize: both;
  border: 10px solid red;
  padding: 1rem;

  .big {
    @supports not (animation-range: entry-crossing) {
      font-size: 3rem;
    }
  }
}

html {
  background: black;
  color: white;
  font-family: system-ui, sans-serif;
  overflow: clip;
}

.small {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.