JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<div id="wrapper"><div id="content"></div></div><br>
Resize the window and see. Always stays 3:1

CSS

#wrapper {
    position: relative;
    padding-bottom: 33.33%; /* Set ratio here */
    height: 0;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: green;    
}
body{
    font-size: 30px;
}