JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

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

CSS

body {
  margin: 0;
}

.wrapper {
  width: 100%;
  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%;
  }
}