JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
    <div class="flex-item">I'm top dog!
    </div>
    <div class="flex-item flex-center">
        I want to be vertically centered! And I am!
    </div>
</div>

CSS

*{
    box-sizing:border-box;
    padding:5px;
}
.flex-container {
    border: 1px solid;
    display:flex;
    align-items:center;
    height: 100px;
}
.flex-item {
    flex: 1 auto;
    border: 1px solid green;
    height:100%;
    display:flex;
    justify-content:center;
}
.flex-center {
    align-items: center;
}