How to set the height of both the columns to the highest of them with jQuery?

Question

A sheetdb plugin pulls data from a shared googlesheet to display them on a WordPress site. The page displays nothing else but this dynamic contents from the googlesheet. It is a simple page. Below is custom field content from WordPress page editor. This is what prints data on the page via template(Code added at the end of this post)

[sheetdb url="https://sheetdb.io/api/v1/ymk583vab4dwh" search="Approval=1&Display=1"]
<div class="story-entry">
  <div class="content"> {{Story}} </div>
  <div class="contestent-name">-{{First Name}} {{Initial}}</div>
</div>
[/sheetdb]

CSS for the div displaying columns on the page.

.story-entry {
  margin: 15px 10px;
  border: solid 1px black;
  padding: 10px 20px;
  width: calc(50% - 22px);
  float: left;
}

<?php $story = get_field('story'); ?>

<div class="contest-story">
  <div class="wrap-x">
    <div class="inside">
      <div class="row">
        <div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>  
      </div>
    </div>
  </div>
</div>

The problem with the columns is them having the same height resulting in unnecessary wastage of the extra space. I got the logic to dynamically find out the max height of the two columns and set both them to the max height.

With the following jQuery code I am trying to use to set the height to both the columns.

$(document).ready(function() {
    var maxHeight = 0;
    var entryNumber = 1;
    var prevEntrySelector = null;
    $(".story-entry").each(function(){
    alert('Hello');
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
       if ((entryNumber % 2) == 0) {
      // Even entry.
      // Set height of previous entry and this entry to maxHeight.
      $(this).height(maxHeight);
      prevEntrySelector.height(maxHeight);
      // this - this selector - this story entry
      maxHeight = 0;
       }
       prevEntrySelector = $(this);
       entryNumber ++;
    });

    $(".entry-selector").height(maxHeight);
});

This code doesn't work on this page. Below is the reference page.

https://knackshops.com/pages/spread-joy-message

What I did so far is as seen below with unnecessary space after the content

This is the page that I want to make look like this with jQuery.

The full template code for this page:

<?php 
$hero = get_field('hero');
$hero_h1 = $hero['hero_-_h1'];
$hero_h2 = $hero['hero_-_h2'];
$background = $hero['hero_-_background_options'];
$image = $background['background_-_image'];

$link_text = get_field('link_text');
$link_to_contest = get_field('link_to_contest');

$story = get_field('story');
?>

<?php get_header(); ?>

<div class="default-flex-hero relative">
  <div class="inside">
    <div class="row mb0 pt pb">
    <?php if($image): ?>
      <div class="col col-xs-12 col-md-2 col-lg-2 mb0">
          <picture>
            <source media="(max-width: 480px)" srcset="<?php echo($image['sizes']['small']); ?>">
            <source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
            <source media="(max-width: 1280px)" srcset="<?php echo($image['sizes']['large']); ?>">
            <source srcset="<?php echo($image['sizes']['xlarge']); ?>">
            <img src="<?php echo($image['sizes']['xlarge']); ?>" alt="<?php echo $image['alt']; ?>" />
          </picture>
        </div>
      <?php endif; ?>
      <div class="hero-col col col-xs-12 col-md-10 col-lg-10 mb0">
              <h1 class="mb0 color-tan-dark">
                <?php if( $hero_h1 ): echo $hero_h1; endif; ?>
              </h1>
              <?php if( $hero_h2 ): ?>
              <h2 class="mb0 mt2 alt-heading h4">
                <?php echo $hero_h2; ?>
              </h2>
              <?php endif; ?>
        </div>
    </div>
  </div>
</div>

<div class="contest-link">
  <div class="wrap-x">
    <div class="inside">
      <div class="row">
        <div class="contest-link-text col col-xs-12">
        SHARE YOUR OWN STORY <a href="<?php echo $link_to_contest; ?>">HERE</a>
        </div>  
      </div>
    </div>
  </div>
</div>

**<div class="contest-story">
  <div class="wrap-x">
    <div class="inside">
      <div class="row">
        <div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>  
      </div>
    </div>
  </div>
</div>**

<?php get_footer(); ?>

Answer 1

I finally accomplished it with jQuery and an eventhandler for the plugin sheetdb.

window.addEventListener("sheetdb-downloaded", function() {
  var maxHeight = 0;
    var entryNumber = 1;
    var prevEntrySelector = null;
    $(".story-entry").each(function(index) {
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    if ((entryNumber % 2) == 0) {
      // Even entry.
      // Set height of previous entry and this entry to maxHeight.
      $(this).height(maxHeight);
      prevEntrySelector.height(maxHeight);
      // this - this selector - this story entry
      console.log( "Height: " + maxHeight );
      maxHeight = 0;
    }
    prevEntrySelector = $(this);
    entryNumber ++;
    return true;
    });
    $(".entry-selector").height(maxHeight);
});

Answer 2

You can do with css just add these line

.contest-story-text > div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.story-entry {
    height: auto !important;
}

@media only screen and (max-width: 600px) {
    .story-entry {
            width: calc(100% - 22px) !important
    }
}