JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

nav{width:80%;margin:100px auto 0 auto;}
.left{float:left;width:30%;
background:#090;}
.right{float:right;width:30%;
background:#090;}
.logo{min-width:40%;margin:0 30%;
background:#009;}

@media all and (max-width:300px)
{
  .left{float:none;width:100%;}
  .right{float:none;width:100%;}
  .logo{width:80%;margin:0 auto;}
}