JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<nav>
<div class='navcontainer'>
<div class='navcontainer_l'><img class='logo' src="http://www.strahltechnik-klein.de/wp-content/uploads/2015/05/Logo_Klein_150.jpg"></div>
<div class='navcontainer_m'>456</div>
<div class='navcontainer_r'>
<FORM ACTION="" id="navlinks" METHOD=POST accept-charset="utf-8">
<button class='navButton' name='leeren' value='1'>Empty</button>
<button class='navButton' name='nav_link' value='prev'>Prev</button>
<button class='navButton' name='nav_link' value='next'>Next</button>
<button class='navButton' name='nav_link' value='aktuell' title='Aktuell'>Aktuell</button>
</FORM>
</div>
</div>
</nav>

CSS

.navcontainer {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-gap: 25px;
  justify-items: start;
}
.navcontainer_l {
   grid-row: 1;
   grid-column: 1 / 2; // Element von Linie 1 bis Linie 3
   align-self: start;
   justify-self: start;
   }

.navcontainer_m {
   grid-row: 1;
   grid-column: 2 / 3; // Element von Linie 1 bis Linie 3
}
.navcontainer_r {
   grid-row: 1;
   grid-column: 3 / 4; // Element von Linie 1 bis Linie 3
   align-self: end;
   justify-self: end;
}



nav
{

	background: #F2F2F2;
	text-align: right;
	height: 60px;
	padding: 15px;
}

#navlinks
{
	border: 1px solid #CECECE; 
    border-radius: 3px; 
    FONT-SIZE:.9em;
    display:inline-block;
	background-color: beige;
	padding: 2px
}

.navButton {
background:none!important;
border: none; 
font-family:arial,sans-serif; /*input has OS specific font-family*/
color:#264A4A;
FONT-SIZE:.9em;
text-decoration:none;
cursor:pointer;
padding: 2px 5px;
}

.navButton {
     border: none; 
     border-left: 1px solid #cecece;
}
.navButton:first-of-type {
     border: none; 
}

.logo {
    width: 30%;

	}