JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div class="float">
    Logo
  </div>
  <div class="abs">
    Menu
  </div>
</header>

CSS

header {
  position: relative;
  height: 150px;
  width: 250px;
  background: grey;
  color: #fff;
}

.float {
  float: left;
  height: 50px;
  width: 50px;
  background: blue;
}

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.abs {
  position: absolute;
  height: 50px;
  width: 50px;
  background: black;
  bottom: 0;
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
}