JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent1">
  <div class="child1"></div>
</div>
<br />
<div class="parent2">
  <div class="child2"></div>
</div>

CSS

div.parent1 {
  width:calc(50vw - 0px);
}
div.child1 {
  height:calc(50vw - 0px);
  background:#def
}
div.parent2 {
  width:50vw;
}
div.child2 {
  height:50vw;
  background:#def
}