JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<h1>Vertical Centering With Flexbox Bros</h1>

<div class="important-numbers">
    <div class="option-label">
        <img src="https://upload.wikimedia.org/wikipedia/en/9/99/MarioSMBW.png" />
    </div>
    <div class="option-label">
        <img src="https://upload.wikimedia.org/wikipedia/en/f/f1/LuigiNSMBW.png" />
    </div>
    <div class="option-label">
        <img src="https://upload.wikimedia.org/wikipedia/en/d/d1/Toad_3D_Land.png" />
    </div>
</div>

SCSS

.important-numbers {
    display: flex;

    .option-label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 100%;
    }
}

img {
    width: 100%;
}