Best Way To Crossfade Text With a Fixed Height in an Absolute Div?

I want to crossfade several text quotes (coming from a CMS) having various lengths within a container div of a specific width. This is what I came up with, but it’s 2024 and I feel like there has to be an easier way to do this, either using only CSS or not having to resort to using onResize. What I’m doing is looping through all the quotes twice: one for display and the other for size calculation – determining the “tallest” quote and setting the parent div to that height.

I don’t want to resort to importing a gallery/carousel library or js framework as a dependency for something that seems so simple. Just wondering if anyone has any ideas on simplifying this. Thanks!


screenshot of codepen