javascript - Find minimum height of div with changing content so that page below doesn't jump around -

i have testimonial section of webpage i'm developing , cycle through number of different testimonial comments using jquery fadein() & fadeout()

if don't dictate height of section set height height change according length of testimonial comment , rest of page below jump around.

as creating site using wagtail (django based cms) , i want able automate calculating appropriate sized section height according longest testimonial comment.

here code have far:

html:

<section class="bg-primary testimonial-wrapper" id="testimonials">           <div class="container">             <div class="row">               <div class="col-xs-2 col-xs-offset-2">                 <i class="fa fa-4x fa-quote-left"></i>               </div>               <div class="col-xs-6 testimonial-wrapper">                 <div class="testimonial-item">                   <p>testimonial comment 1.</p>                   <p><em>- oliver nicholson</em></p>                 </div>                 <div class="testimonial-item">                   <p>another quote!</p>                   <p><em>- nollie bollie</em></p>                 </div>               </div>             </div>           </div>         </section> 

jquery/js:

$(document).ready(function() {    var testimonials = $(".testimonial-item");   testimonials.hide();   var testimonialindex = -1;    function shownexttestimonial() {     ++testimonialindex;     testimonials.eq(testimonialindex % testimonials.length)     .fadein(2000)     .delay(500)     .fadeout(2000, shownexttestimonial);   }    shownexttestimonial();  }); 

is there way calculate min-height of testimonial-wrapper testimonial-wrapper section able accommodate every comment without changing size when transitioning 1 comment next?

https://jsfiddle.net/seahorsepip/jztcnoah/

  //get max height   var wrapperheight = 0;   testimonials.each(function() {     wrapperheight = $(this).outerheight() > wrapperheight ? $(this).outerheight():wrapperheight;   });   //set max height   $(".testimonial-wrapper").height(wrapperheight);