JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="main">
    <div id="left">
      <p>1</p>
    </div>
    <div id="right">
      <p>2</p>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="main">
    <div id="left">
      <p>3</p>
    </div>
    <div id="right">
      <p>4</p>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
}

.wrapper {
  width: 100%;
  display: inline-block;
  position: relative;
}

.wrapper:after {
  padding-top: 40%;
  display: block;
  content: '';
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 0;
}

#left,
#right {
  font-family: serif;
  font-size: 20vw;
  display: inline-flex;
  width: 50%;
  height: 100%;
  float: left;
}

#right {
  color: blue;
}

#left p:first-child,
#right p:first-child {
  margin-top: 0px;
}

@media (max-width: 400px) {
  #left,
  #right {
    font-size: 40vw;
    width: 100%;
  }
  .wrapper:after {
    padding-top: 80%;
  }
}