JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child"></div>
</div>

CSS

.parent {
   position: relative;
   height: var(--parentHeight,200px);
   width: 600px;
   background-color: red;
 }
 .parent .resized {
   height: 100px;
 }

 .child {
   position: absolute;
   height: 20%;
   width: calc(var(--parentHeight,200px) / 10);
   background-color: green;
 }