JSFiddle - React, Tailwind, and code Playground

by Diana Lemen

HTML

<div class="test1">

  <div class="test">
  </div>

  <div class="test2">


<div class="three">
    <div class="test3">
    </div>

    <div class="test4">
    </div>
</div>
  </div>
</div>

CSS

.test {
  display: block;
  position: relative;
  background-color: red;
  width: 30%;
  height: 500px;
}

.test1 {
  display:  flex;
  width: 100%;
  height: 500px;
}

.test2 {
  display:inline-block;
  position: relative;
  background-color: green;
  width: 70%;
  height: 500px;
}

.three {
  display: flex;
}
.test3 {
  background-color: blue;
  width: 50%;
  height: 400px;
}

.test4 {
  background-color: purple;
  width: 50%;
  height: 400px;
}