JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testimonials">
	<ul class="rotator">
        <li class="testimonial">
            <p>Short testimonial with short height.</p>
            <span class="author">Author 1</span>
        </li>
        <li class="testimonial">
            <p>Long testimonial with longer height. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <span class="author">Author 2</span>
        </li>
	</ul>
</div>

CSS

#testimonials {
    background: #eaeaea;
    border-bottom: 1px solid #333;
    margin-bottom: 3em;
    padding-bottom: 3em;
}

.rotator {
    list-style: none;
    padding: 0;
    position: relative;
    text-align: center;
    width: 100%;
}

.rotator>li {
    font-size: 15px;
    margin: 0 auto;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.rotator>li:first-child {
    -webkit-animation: loop 5s infinite;
}

.rotator>li:last-child {
    -webkit-animation: oplast 5s infinite;
}

.rotator>li .author {
    color: #888;
    font-size: 13px;
    text-transform: uppercase;
}

@-webkit-keyframes loop {
  0% { opacity: 0; }
  10% { opacity: 1; }
  33% { opacity: 1; } 
  44% { opacity: 0; }
}

@-webkit-keyframes opsecond {
  33% { opacity: 0; }
  44% { opacity: 1; }
  66% { opacity: 1; }
  77% { opacity: 0; }
}
  
@-webkit-keyframes oplast {
  66% { opacity: 0; }
  77% { opacity: 1; }
  100% { opacity: 1; }
  0% { opacity: 1; }
  10% { opacity: 0; }
}

JavaScript

// Set height of testimonials

var testimonialHeight = $('li.testimonial').outerHeight();

$('ul.rotator').css('height', testimonialHeight);