Div Size scale to largest object in repeating element

[Michkael]

Good day,

I have a problem that I would love to solve with only CSS if possible and if not, with JS or JQuery.
I have a repeating element composed of images and some text below.
The length of the text vary depending on the title of the article.
I want to set the height of the repeating div equal to the height of the largest div.

  <?php $Art = $pages->get("name=Blog");?>
  <section id="<?=$Art->title;?>" class="mea-our-team-section section-padding section-dark">
    <div class="container">
      <div class="row">
        <!-- Section Titile -->
        <div class="col-md-6 mea-title-section animated wow slideInLeft" data-wow-delay=".2s">
          <h1 class="section-titile-bg"><?=$Art->title;?></h1>
          <h1 class="section-title"><?=$Art->title;?></h1>
        </div>
        <!-- Section Quote -->
        <div class="col-md-6 mea-section-quote wow animated slideInRight" data-wow-delay=".2s">
          <p><?=$Art->BlogBody;?></p>
        </div>
      </div>
      <div class="row mt-20 wow animated fadeInUp"  data-wow-delay=".3s">
        <div id="team-carousel" class="owl-carousel owl-theme">
          <?php foreach($Art->children() as $Art):
            $image = $Art->ArticleImage;
            $image = $image->size(287, 160);?>
          <div class="item">
            <!-- Single Team Widget -->
            <div class="">
              <div class="single-blog-widget">
                <img src="<?=$image->url;?>" class="center-block img-responsive" alt="">
                  <div class="blog-info">
                  <div class="know-more">
                    <a class="btn btn-round btn-fab btn-xs" href="<?=$Art->url;?>"><i class="material-icons">&#xE5C8;</i><div class="ripple-container"></div></a>
                  </div>
                  <a href="<?=$Art->url;?>"><h2 class="subtitle"><?=$Art->ArticleHeadline;?></h2></a>
                  <p><?=$Art->ArticleBody2;?></p>
                </div>
              </div>
            </div>
          </div>
         <?php endforeach;?>
        </div>
      </div>
    </div>
  </section>

Here below you find attached an image of the website.

Thank you!

[Zeka]

@Michkael Flexbox (css), https://github.com/liabru/jquery-match-height (javascript). 

[flydev]

Look like you are using the Bootstrap framework v4.

• Use card and card-group : https://getbootstrap.com/docs/4.0/components/card/#card-groups
• Play with Flex alignement variations : https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

[Michkael]

I am using, unfortunately, bootstrap framework v3.
I have tried with panel unsuccesfully, do you have other advices?

[louisstephens]

There is a "solution" posted on stackoverflow that might fit your needs.