JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="box box-1"><span>25" (21:9)</span></div>
<div class="box box-2"><span>22" (16:10)</span></div>

<br /><br />

<div class="box box-2"><span>22" (16:10)</span></div>
<div class="box box-2"><span>22" (16:10)</span></div>

<br /><br />

<div class="box box-1"><span>25" (21:9)</span></div>
<div class="box box-1"><span>25" (21:9)</span></div>

CSS

body{
  font-size: 6px;
  padding: 2em;
}

.box{
  display: inline-block;
  background-color: #333;
  text-align: center;
  vertical-align: bottom;
}

.box span{
  font-size: 1.5em;
  color: #fff;
  font-family: sans-serif;
}

.box-1{
  width: 58.36570940614668em;
  height: 25.013875459777147em;
  line-height: 25.013875459777147em;
}

.box-2{
  width: 47.38614522780432em;
  height: 29.6163407673777em;
  line-height: 29.6163407673777em;
}

JavaScript

/**
 * Monitor ratio comparison
 */