JSFiddle - React, Tailwind, and code Playground

HTML

<div class='outer'>
    <div class='middle'>
        A
      <div class='inner'>
      </div>
    </div>
</div>

<div class='outer' style='width:100px'>
    <div class='middle'>
        B
      <div class='inner'>
      </div>
    </div>
</div>

<div class='outer' style='height:400px'>
    <div class='middle'>
        C
      <div class='inner'>
      </div>
    </div>
</div>

CSS

.outer {
    background-color: green;
    height: 300px;
    width: 70px;
    float: left;
    margin-right: 10px;
}

.middle {
    background-color: red;
    height: 100px;
    width: 50px;
    padding-top: 100%;
}

.inner {
    background-color: blue;
    height: 3px;
    width: 100%;
}