JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <nav><div class="left">left</div><div class="center">
      <div class="logo"></div>
    </div><div class="right">right</div></nav>
</div>

CSS

.main{margin:0 80px;}
.main nav{white-space:nowrap;}
.left{display:inline-block;width:40%;
  vertical-align:middle;background:#090;}
.right{display:inline-block;width:40%;
  vertical-align:middle;background:#090;}
.center{display:inline-block;width:20%;position:relative;
  vertical-align:middle;}
.logo{position:relative;width:100%;padding-top:100%;
border-radius:50%;
background:#009;}