Второй блок необходимо разместить в одну строку с nav.
Может нужно как то поменять структуру html?
P.s. решение без js, bootstrap'а и position: absolute
Код:
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400&family=Oswald:wght@200;300;400;700&family=Roboto+Condensed&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background: rgb(42, 61, 59);
/* font-family: 'Cormorant', serif;
font-family: 'Oswald', sans-serif;
font-family: 'Roboto Condensed', sans-serif; */
}
.container {
margin: 0 auto;
width: 1110px;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 680px;
}
.logo {
height: 75px;
}
.nav__item {
font-family: 'Oswald';
font-weight: 400;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
}
.nav__search {
padding-left: 28px;
background-image: url('../assets/header/search.png');
background-repeat: no-repeat;
background-position: left
}
.info {
display: flex;
align-items: flex-end;
flex-direction: column;
}
.info__title {
font-family: 'Oswald';
font-weight: 400;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #43FFD2;
text-align: end;
}
.info__text {
font-family: 'Oswald';
font-weight: 300;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #FFFFFF;
}
<header>
<div class="container">
<nav class="nav">
<a class="logo" href="#"><img src="" alt="Логотип"></a>
<a class="nav__item" href="#">Каталог</a>
<a class="nav__item" href="#">Доставка и оплата</a>
<a class="nav__item" href="#">Контакты</a>
<a class="nav__item" href="#">FAQ</a>
<a class="nav__item nav__search" href="#">Поиск</a>
</nav>
<div class="info">
<div class="info__mail">
<p class="info__title">zakaz@loverflower.by</p>
<p class="info__text">Доставка 24/7 по договоренности с оператором</p>
</div>
<div class="info__street">
<p class="info__title">ул. Тимирязева 67</p>
<p class="info__text">10:00 до 21:00 без выходных</p>
</div>
</div>
</div>
</header>