JSFiddle - React, Tailwind, and code Playground

by erikjung

HTML

<div class="vertically-centered-module">
    <span>Hello</span>
    <span>
        <img src="//placehold.it/60x60" />
    </span>
</div>

CSS

body {
    margin: 1em;
}

div {
    padding: 1em;
    background: #eee;
    border: 1px solid #ccc;
}

img { vertical-align: middle; }

/* ------------- */

.vertically-centered-module {
    white-space: nowrap;
}

.vertically-centered-module > * {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.vertically-centered-module > :last-child {
    text-align: right;
}