JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div class="nav">

  <div class="links">1 </div>

  <div class="header-title">2</div>

</div>

CSS

.nav {
  display: flex;
}

.links {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px dashed red;
  max-width:150px
}

.header-title {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed red;
}