JSFiddle - React, Tailwind, and code Playground

by caffeinehigh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3 casestudy-container">
    <div class="item">
      <div class="row">
        <div class="col-sm-12">
          <div class="image"><img src="https://via.placeholder.com/150C" ></div>
          <div class="text text1">
            <h2>helloooo</h2>
            <p class="excerpt">hmm hello to you too</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 casestudy-container">
    <div class="item">
      <div class="row">
        <div class="col-sm-12">
          <div class="image"><img src="https://via.placeholder.com/150C"></div>
          <div class="text text2">
            <h2>helloooo hellooo</h2>
            <p class="excerpt">hmm hello to you tooooooooooo</p>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="col-xs-12 col-sm-6 col-md-3 casestudy-container">
    <div class="item">
      <div class="row">
        <div class="col-sm-12">
          <div class="image"><img src="https://via.placeholder.com/150C"></div>
          <div class="text text3">
            <h2>helloooo googbyeeeee</h2>
            <p class="excerpt">hmm people....</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

CSS

.text1 {background:red}
.text2 {background:green}
.text3{background:pink}

JavaScript

$(window).resize(function() {

      var highestBox = 0;

          $('.casestudy-container .text').each(function(){

                  if($(this).outerHeight() > highestBox) {
                  highestBox = $(this).outerHeight();

          }
      });

      $('.casestudy-container .text').outerHeight(highestBox);

  }).resize();