JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">

  <div class="text">
    <h1>
    hello world
    </h1>
    <p>
    Toster rulit, peace pacany!
    </p>
  </div>

<div class="img-container">
  <img class="img" src="https://avatars.mds.yandex.net/get-pdb/1340633/81f31978-eabf-4c73-99e6-2f1c7249047d/s1200?webp=false">
 </div>
</div>

CSS

.box {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: red;
}

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

.img-container {
  width: 50%;
}

.text {
  width: 45%;
  display: flex;
	flex-direction: column;
	justify-content: center;
  align-items: center;
}