JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a"><div class="b cf"></div></div>

CSS

.a, .b { border: 1px solid red; }

.a { text-align: center; }
.b { display: inline-flex; height: 20px; width: 20px; }

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}