JSFiddle - React, Tailwind, and code Playground

HTML

<div class='rectangle'>
      <div class='set_rectangle_height'>
         <div class='full_height_div'>
            <div class='square_set_width'></div>
         </div>
      </div>
   </div>

CSS

.rectangle
{
    position: relative;
    width: 30%;
    display:inline-block;
    background-color: green;
}
.set_rectangle_height
{
    padding-bottom: 50%;/*ratio*/
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
}
.full_height_div
{
    height: 100%;
    width: 20px;/*will be deleted once .square_set_width is working*/
    position: absolute;
    background-color: red;
}
.square_set_width
{                   
    display: inline-block;
    padding-left: 100%;/*this should make the blue div square, but it does not :( */
    position: relative;
    height: 100%;
    background-color: blue;
}