JSFiddle - React, Tailwind, and code Playground

HTML

<div class="aspectwrapper">
    <div class="content">
        I'm in a perfect box. Go ahead: resize me.
    </div>
</div>

CSS

.aspectwrapper {
display: inline-block; /* shrink to fit */
width: 50%; /* whatever width you like */
position: relative; /* so .content can use position: absolute */
border: 1px #aaa dashed;
}
.aspectwrapper::after {
padding-top: 100%; /* percentage of containing block _width_ */
display: block;
content: '';
border: 1px red dotted;
}
.content {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */
border: 1px #000 solid;
overflow: hidden;
overflow: hidden;
}