JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">

  <div class="item item-1">
    <div class="item__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, officiis reprehenderit ad sunt. Doloribus nesciunt placeat quos, repellendus explicabo! Possimus ut velit quas sunt iusto, esse accusamus deserunt debitis culpa earum nihil aut nobis expedita laborum atque eum sit hic facilis quisquam ab, voluptatibus totam cum ducimus repellat minus? Adipisci, officia, reiciendis. Rerum tempore atque temporibus ipsa odit error magni vitae reprehenderit at dolore delectus eligendi ipsam pariatur minima consequuntur commodi itaque officia voluptatum fuga voluptatibus, iure sint asperiores repellat maxime. Nam deleniti, sapiente officia eveniet, veritatis sunt minima doloribus tempora nisi quia pariatur doloremque maiores commodi! Cum aliquid, debitis quasi vel totam delectus quibusdam libero perspiciatis distinctio, amet vitae sit rerum? Atque, eaque eveniet quibusdam maiores accusamus quia odio fugit illo. Voluptatum magni possimus suscipit mollitia earum reiciendis, libero
    </div>
  </div>
  <div class="item item-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta illum, error amet! Accusantium recusandae voluptates, dolores adipisci fugiat earum asperiores repellendus impedit harum, ab qui velit, omnis hic ut dolorem!</div>

</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 50px;
  font-family: 'Neucha', cursive;
}

.wrap {
  display: flex;
  gap: 20px;
  width: 500px;
  margin: auto;
}

.item {
  width: 50%;
  overflow-y: auto;
}
.item-1 {
  position: relative;
}

.item__content {
  position: absolute;
  top: 0;
}