JSFiddle - React, Tailwind, and code Playground

HTML

<header class="wrap">
        <div class="row">
            <div class="menuIcon">Menu Icon</div>
            <div class="pageTitle">Good morning, John Doe</div>
            <div class="logo">Logo</div>
        </div>
    </header>

CSS

.wrap {
    height: 41px;
    background-color: gray;
    width: calc(100% - 34px);
    margin: 17px auto;
    display: table;
}
.row {
    display: table-row;
}
.menuIcon {
    display: table-cell;    
    vertical-align: middle;
}
.logo {
    display: table-cell;
    vertical-align: middle;
}
.pageTitle {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}