JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="image-container">
    <img src="https://dummyimage.com/hd1080" alt="Image">
  </div>
  <div class="content">
    <div class="title">
      <h3>Title</h3>
    </div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere veroLorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat
        optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil
        numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!!</p>
    </div>
    <div class="button">
      <button>Click me!</button>
    </div>
  </div>
</div>

CSS

.wrapper {
  display: flex;
  padding: 0px 20px 0px;
  border: 1px solid red;
}

.image-container {
  width: 50%;
  position: relative;
  overflow: hidden;
  padding: 0;
}

img {
  height: 100%;
  width: auto;
  min-width: 100%;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.content {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 9px 30px 30px;
}

.text {
  flex: 1;
}

p {
  overflow: hidden;
  height: 100px;
}