JSFiddle - React, Tailwind, and code Playground

HTML

<header id="flexHeader">
<section class="title">Terminator v0.1</section>
<section class="control">
<nav>
<a href="?action=clear" name='leeren' value='1'>Empty</a>
<a href='?action=prev__49_2017__2'>Prev</a>
<a href='?action=next__51_2017__2'>Next</a>
<a href='?action=aktuell__1513433888__2' title='Aktuell'>Aktuell</a>
</nav>
<section class="info">Hallo Pit</section>
</section>
</header>	
<hr style="height:20px; background-color: #080">
<header id="gridHeader">
<section class="title">Terminator v0.1</section>
<nav>
<a href="?action=clear" name='leeren' value='1'>Empty</a>
<a href='?action=prev__49_2017__2'>Prev</a>
<a href='?action=next__51_2017__2'>Next</a>
<a href='?action=aktuell__1513433888__2' title='Aktuell'>Aktuell</a>
</nav>
<section class="info">Hallo Pit</section>
</header>

CSS

header {
  border-bottom: 2px solid #ccc;
  height: 60px; 
}
.title {
  text-align: center; font-size: 2em;
}
nav {
  font-family: arial, sans-serif; /*input has OS specific font-family*/
  font-size:.9em;
  color:#264A4A;
	text-align: center;
  border: 1px solid red; border-radius: 6px; overflow:hidden;
  display: flex; align-items: stretch; 
}
header nav a {
   flex: 1 0 5em; line-height: 150%;
   text-decoration:none;
}
header nav a:nth-of-type(n+2) {
   border-left: 1px solid red;
}
header nav a:focus, header nav a:hover {
  background-color: #ff8;
}
/* Teil 1: Layout mit Flexbox */

header#flexHeader {
  display: flex;
}
header#flexHeader .title {
  flex: 1 1 10em; 
}
header#flexHeader .control
{
  flex: 0 0 20em;
  display: flex; flex-direction:column; justify-content: space-between;
}
header#flexHeader nav {
  flex: 0 0 auto;
}

/* Teil 2: Formatierung mit grid */

header#gridHeader {
   display: grid;
   grid: "title nav" min-content
         "title info" 1fr
         / 1fr 20em;
}
header#gridHeader .title {
  grid-area: title;
}
header#gridHeader nav {
  grid-area: nav;
}
header#gridHeader .info {
  grid-area: info; 
  align-self: end;
}