Pomoc w ułożeniu div-ów

Czesc, chce uzyskac taki efekt:
https://zapodaj.net/b589e3e13aade.png.html
Ale niestety wychodzi mi coś takiego, męcze sie juz z tym z 3h ktoś może poratowac?
https://codepen.io/olivier-mazur/pen/ZEKqzrO?fbclid=IwAR31NeE7UA4waEz_YpbCRBlqecsYHQ-Ikl7CuaB7sUZHLuCVUDjVtmOIb7c
Przycisk "Zaloguj" nie wyśrodkowuje się tak jak powinien, a ustawiac na stałe szerokosci i wysokości to tak srednio ..

Jak to flexem zrobić nie mam za bardzo pomysłu. Pewnie jakoś się da, ale ciężko.

Ale chyba prościej będzie z CSS grid

<div class="banner">Skorzystaj z ofert!</div>
<a class="login" href="">Zaloguj się</a>
<ul class="info">
  <li><a href="#">Informacje</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>

body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 1rem;
}

.banner {
  padding: 1rem;
  background-color: red;
  grid-column: 2 / 3;
  text-transform: uppercase;
}
.login {
  display: block;
  grid-column: 3 / 4;
  align-self: center;
}
.info {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: center;
  padding-left: 0;
}
.info li {
  display: inline-block;
}
.info li:not(:last-child)::after {
  content: ' |';
}

https://jsfiddle.net/rsa65jmb/

wow, dziękuję naprawde. czas poduczyc sie grida

Pewnie się da, ale nie bardzo rozumiem, co właściwie chcesz osiągnąć.
Niemniej dostałeś już chyba jakieś działające rozwiązanie, więc to już pewnie bez znaczenia.