JSFiddle - React, Tailwind, and code Playground

HTML

<section class="section storyblok bggoud">
  <div class="center">
    <div class="blok-two respons">
      <div class="item first a-pad a-pad-right sh">
        <h3 class="text-left upper">Same heights Heading here</h3>
        <p>Sedit volum faciatqui offic torro quaesequi re nimolup tatent voluptas asped ulpariore occulparis vendus dolores molentibusa qui audi ipide exerum ut que pore nus dolupta suntoreiunt, officia ndionessus evelit int.</p>
        <p>Uda voluptia voluptaepe alicati cor apiet ad modipientur, que essitat eseris none nonectatet fugiatisqui con ne vendame volora volento tatentium ut pa con eate prat.</p>
        <p>Ovid essi qui toribus rerisque que posa nis saera asperfe riatist ex eaquo occatquis otatem vero volupiti aute nis modi sinctore, ut imus qui repella boratusa qui aute nis modi sincsi nus.</p>
      </div>
      <div class="item last bgburger1 sh a-pad"></div>
      <div class="clear"></div>
    </div>
  </div>
</section>

CSS

h3{margin-top:0;}
.item{padding:10px; border:1px solid #ccc; margin-bottom:10px;}
.bgburger1{background:#f00;}

@media screen and (max-width: 680px) {
  .bgburger1{background:#fc0; height:50px;}
 }

JavaScript

// Same height
	jQuery(document).ready(resizeTheHeights);
	function resizeTheHeights() {
		var allHeights = [];
		$('.sh').each(function() {
			var thisHeight = $(this).height();
			allHeights.push(thisHeight);
		});
		var highestHeight = Math.max.apply(Math, allHeights);
		$('.sh').height(highestHeight);
	}
  
  
  
  // this same height script only needs to work on viewport 680 and larger.
  // on resize it needs to recalculate too! I found this below script but don't know how to make this work/combine and if it will work.
  
  
// 		$(window).resize(function(){
//			if ($(window).innerWidth() > 680) {
//				??
//			} else {
//				??
//			}
//		});
//		$(window).resize();