JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus voluptas laboriosam, dolore, repellendus asperiores impedit dolor ex, ea magni eligendi vero fugiat soluta aliquam fuga excepturi ab mollitia cupiditate molestiae sapiente temporibus voluptatem, quidem at rerum totam porro! Delectus dignissimos iste, maxime. Repellat officia numquam ad voluptatum, veritatis voluptates ducimus modi ipsum delectus, soluta veniam id dolore exercitationem eveniet, quam aperiam consequatur. Quod numquam sequi, aperiam provident dolorem nobis vel nihil doloribus deleniti. Ducimus, repellat. Magnam, blanditiis ab adipisci maiores veritatis harum accusamus nulla quam optio non necessitatibus consectetur, cumque nobis dolor illo, autem. Odio quibusdam nesciunt nisi sequi quos, similique quo error accusamus iusto dolores porro commodi beatae ipsum voluptatum eum aliquid impedit sed soluta, esse laudantium quam temporibus eveniet facilis doloremque! Aut perferendis incidunt, aperiam officiis itaque. In, dicta sunt minus facilis natus reprehenderit animi sit reiciendis. Ratione quae voluptatum sapiente tenetur, sint, totam id perferendis fugit molestiae omnis hic quibusdam. Nemo id repellat adipisci voluptatem quibusdam necessitatibus quae provident ullam ratione commodi fugiat consequatur eos officiis nisi maiores accusantium, soluta eligendi modi itaque facilis dolor. Reiciendis delectus, cupiditate beatae, culpa sed vero nemo a possimus quidem dolor hic sequi, commodi quas dolorem, alias voluptatem minima nesciunt blanditiis?
  </div>
  <div class="decoration">
    <img class="img" src="https://static.tildacdn.com/tild6233-3435-4536-b337-636132366539/lotus-bw.png" alt="">
  </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;
  font-family: 'Neucha', cursive;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 20px 0;
}

.decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: url(https://cdn.pixabay.com/photo/2019/01/22/17/13/north-sea-3948520_1280.jpg) no-repeat center / cover;
}

.img {
  width: 100%;
  max-width: 400px;
  opacity: 0.3;
}

.content {
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr 500px;
  }

  .content {
    order: 1;
    padding-left: 0;
  }