JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main" style="width: 100%;">
    <div class="container">
		<div class="sizing"></div>
		<div class="content"></div>
	</div>
</div>

CSS

.main {
    width: 100%;
}
.container {
    width: 30%;
    float: right;
    position: relative;
}
.sizing {
    width: 100%;
    padding-bottom: 50%;
    visibility: hidden;
}
.content {
    width: 100%;
    height: 100%;
    background-color: red;
    position: absolute;
    margin-top: -50%;
}