JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
  <div class="logo">Logo</div>
  <div class="slogan">
    <h2>Какой-то слоган</h2>
  </div>
</div>

<!-- div с классом slogan надо выровнять по центру -->
<!-- чтобы он былл в центре шапки -->

CSS

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  width: auto;
  height: 120px;
  background: #3a6e00;
}
.header::after {
  content: "";
  width: 174px;
}
.logo {
  width: 174px;
  height: 60px;
  background: #fff;
  border-radius: 5px;
}

.slogan {
  color: #fff;
  font-size: 28px;
}