JSFiddle - React, Tailwind, and code Playground

by hoss

HTML

<div id="container"> <span></span>

    <div class="outer"> <span></span>

        <div class="inner"></div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    text-align: center;
    height: 100%;
}
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block;
}
span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
.inner {
    background: red;
    width: 30px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
}