JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ratioBox">
    <div class="dummy"></div>
        
    <div class="el">This is the super duper ratio element </div>
        
</div>

CSS

.ratioBox{
    position: relative;
    overflow: hidden;
    width: 75%;            /* percentage width */
    max-width: 200px;      
    min-width: 100px;
    max-height: 112.5px;  
    min-height: 50px;  
}

.dummy {
    padding-top: 50%;      /* percentage height */
}

.el {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}