JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:160px;" class="ratio r16-9">Contenedor de 160px x 90px</div>

<div style="columns:100px 3">
  <div class="ratio r16-9" style="width:inherit;">Contenedor de 0px x 0px</div>
</div>

CSS

.ratio {
  position: relative;
}
.ratio:before {
  content: '';
  display: block;
}
.ratio.r16-9:before {
  padding-top: 56.25%;
}
.ratio.r4-3:before {
  padding-top: 75%;
}
.ratio.r1-1:before {
  padding-top: 100%;
}