JSFiddle - React, Tailwind, and code Playground

by Mehmet Demiray

HTML

<div id="header">
    <div class="left-header">
      TEMA
    </div>
    
    <div class="right-header">
      <div class="left-navbar">123 Sol gelecek</div>
      <div class="right-navbar">123 Sağ Gekecejk</div>
    </div>
    
  </div>

CSS

#header {


  width: 100%
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}
.left-header {
  background: #ff0000;
  width: 300px;
}
.right-header {
  width: 100%;
    margin-left: auto;
  background: #ffF000;
    display: flex;
}
.left-navbar {
  background: #f1f2f3;
}
.right-navbar {
  margin-left: auto;
  background: #ffff0;
}