JSFiddle - React, Tailwind, and code Playground

by hopest

HTML

<div class="div-left"></div>
<div class="rd"></div>

CSS

*
{
    margin:0;padding:0;
}

.div-left{
      background: green;
    position:relative;
    display:inline;
    width:250px;
}

.rd
{
     display:block;
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 1.778 */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
position: relative;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}