JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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