JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
 <div class="row">    
        <div class="col" id="left-col" style="background-color:blue">    
          <p>some content in the left column</p>
          <p>some content in the left column</p>
          <p>some content in the left column</p>
        </div>
        <div class="col" id="right-col" style="background-color:red"> 
          <p>some content in the right column</p>
          <p>some content in the right column</p>
          <p>some content in the right column</p>
          <p style="background-color:green">this should be in the overflow</p>
          <p style="background-color:green">this should be in the overflow</p>
          <p style="background-color:green">this should be in the overflow</p>
          <p style="background-color:green">this should be in the overflow</p>
        </div>
    </div>
</body>

CSS

#left-col {
  height: fit-content;
}
#right-col {
  overflow-y: scroll;
}

JavaScript

$(document).ready(function(){
	
  let height = $('#left-col').css('height');
  $('#right-col').css('height', height);
})