JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div class="first">
1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam reiciendis culpa minus ipsa quibusdam consectetur saepe, voluptatibus nisi obcaecati deleniti minima repellendus libero eligendi veritatis aperiam maxime impedit iusto maiores.
</div>
<div class="next">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto tempore harum voluptates. Mollitia provident quis corporis dolore ex magnam praesentium, sunt, laboriosam consectetur ut voluptas nemo! Aspernatur soluta eaque dolores.
</div>
<div class="next">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto tempore harum voluptates. Mollitia provident quis corporis dolore ex magnam praesentium, sunt, laboriosam consectetur ut voluptas nemo! Aspernatur soluta eaque dolores.
</div>
</div>
<div class="next">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto tempore harum voluptates. Mollitia provident quis corporis dolore ex magnam praesentium, sunt, laboriosam consectetur ut voluptas nemo! Aspernatur soluta eaque dolores.
</p>
</div>

CSS

.first {
  width: 100px;
}

.next {
  width: 100px;
  color: red;
  content-visibility: auto;
  contain-intrinsic-size: 100px;
}