JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <div class="text">
    text
  </div>
  <div class="img">
    <img src="https://habrastorage.org/webt/5b/71/62/5b71626c305f0533272208.png" alt="image">
  </div>
</main>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

main {
  display: flex;
  align-items: center;
  width: 80%;
  min-height: 240px;
  margin: 20px auto;
  background: lightskyblue radial-gradient(circle, red 50%, lightskyblue 50.1%) no-repeat -200px center / 800px 800px;
  overflow: hidden;
}
.text {
  width: 450px;
}

.img {
  
}