JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<div class="row">
  <div class="col-md-8">
    <img class="img-fluid" src="https://via.placeholder.com/100" />
  </div>
  <div class="col-md-4">
    <span class="text" data-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illo quod numquam maxime necessitatibus dolorum quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illo quod numquam maxime necessitatibus dolorum quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illo quod numquam maxime necessitatibus dolorum quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illo quod numquam maxime necessitatibus dolorum quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illo quod numquam maxime necessitatibus dolorum quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illo quod numquam maxime necessitatibus dolorum quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illo quod numquam maxime necessitatibus dolorum quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illo quod numquam maxime necessitatibus dolorum quibusdam. ">
    </span>
  </div>
</div>

CSS

img {
  display: block;
  width: 100%;
}

.row {
  display: flex;
}

.col-md-4 {
  width: 33.3333%;
}

.col-md-8 {
  width: 66.6666%;
  background-color: blue;
}

.text {
  background-color: red;
  position: relative;
  color: transparent;
  width: 100%;
  height: 100%;
  display: block;
}

.text:after {
  content: attr(data-text);
  color: black;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}