JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<section class="col_3 homepageIntroBlocks" id="notANumberBlock" data-thisBlockText="notANumberBlockText">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h3>
</section>
<section class="col_3 homepageIntroBlocks" id="toHelpYouBlock" data-thisBlockText="toHelpYouBlockText">
<h3>We're here<br /> to help you...</h3>
</section>
<section class="col_3 homepageIntroBlocks" id="whoMadeItBlock" data-thisBlockText="whoMadeItBlockText">
<h3>We're the people<br /> who made it...</h3>
</section>
<section class="col_3 homepageIntroBlocks" id="itsYourEventBlock" data-thisBlockText="itsYourEventBlockText">
<h3>It's your event,<br /> on us...</h3>
</section>
</div>
CSS
.homepageIntroBlocks {
background-color: green;
margin-bottom: 10px;
}
JavaScript
function findTallest() {
var tallestBlock = 0;
$('.homepageIntroBlocks').each(function() {
if ($(this).height() > tallestBlock) {
tallestBlock = $(this).height();
}
});
$('.homepageIntroBlocks').each(function() {
$(this).height(tallestBlock);
});
}
$(document).ready(function() {
//findTallest();
$(window).on('resize', findTallest);
});