JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="container">
  <div class="item">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" width="100%">
  </div>
  <div class="item">
    <p>This is the test paragraph.This is the test paragraph.This is the test paragraph.This is the test paragraph.This is the test paragraph.</p>
    <p>This is the test paragraph.This is the test paragraph.This is the test paragraph.This is the test paragraph.This is the test paragraph.</p>
    <p>This is the test paragraph.This is the test paragraph.This is the test paragraph.This is the test paragraph.This is the test paragraph.</p>
  </div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}
.item:first-child {
  width: 40%;
  background: pink;
  padding: 10px;
  margin: 10px;
  height: min-content;
}
.item:last-child {
  width: 20%;
  margin: 10px;
  padding: 10px;
  background: pink;
  overflow: auto;
}

JavaScript

/** 
 * expected result by using jquery
 *
$(window).resize(function(){
console.log(100);
	var height = $('.item:first-child').height();
  $('.item:last-child').height(height);
});
*/