JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
  <div class="container">
    <div class="row">
      <div class="logo">
        <img class="logo__image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAnCAYAAABNJBuZAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wcEDCgVK2T8OAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABCUlEQVRYw+2ZMQrCQBBFX6IIASGCB7DQAwiCkCOIYGVr64W8gbZiqyCmkhRWnsEDiOIBtBKWIUHRRN11BlLMDCQ8mL/zl3jNZgsXwseRyAMkAa7Gs7QRJAQiUYt0tBREQX4vygW/fwx0jHwLzIr4kPfmQgyBk6idgRoQABegZPSOQN220aoICFJy1YiC/PupVUR0gbaR74C9bSAVYANUjdoBaNg2WoGAuK+Ar2pkKuz/xEaxh8BI1EYuin0A9I18DqzzAEnEhWkF9ArUwUK4gOEja+M/OQafvAW+ZG10syuIgiiIgihIXhYl1efbBpLp820brUyfrxpREAVxC+QMxKIX29TzXPmrewMgOjArLLytFAAAAABJRU5ErkJggg==">
        <div class="logo__title">Motion</div>
        <div class="logo__subtitle">Funny Page Templates</div>
      </div>
      <div class="menu">
        <a href="#" class="menuItem">Home</a>
        <a href="#" class="menuItem">About</a>
        <a href="#" class="menuItem">Team</a>
        <a href="#" class="menuItem">Portfolio</a>
        <a href="#" class="menuItem">Other</a>
        <a href="#" class="menuItem">Contact</a>
      </div>
    </div>
  </div>
</header>
<section>
  <div class="container">
    <div class="titles">
      <h2>See The Flexbox Magic</h2>
      <p>
        Of course, the menu must be turned into a button on small screens...
      </p>
    </div>
  </div>
</section>
<section class="header">
  <div class="container">
    <div class="row">
      <div class="logo">
        <img class="logo__image"...

CSS

body {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px;
}

.header {
  background: #f56262;
  color: #fff;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 10px 0;
}

.logo {
  flex-grow: 0.5;
  margin: 10px 15px 10px auto;
}

.menu {
  flex-grow: 0.5;
  text-align: right;
  margin: 10px 0;
}

.logo__title {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 1.5rem;
  vertical-align: bottom;
}

.logo__image {
  vertical-align: bottom;
}

.menuItem {
  margin: 0 15px;
}

.titles {
  text-align: center;
  padding: 20px 0;
}