<style>
.row { display: flex; justify-content: space-between; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Логотип</div><div>Меню</div></div>

<style>
.row { display: flex; align-items: center; height: 70px; background: #fffaf3; gap: 8px; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div style="font-size:24px">Логотип</div><div>Меню</div></div>

<style>
.row { display: flex; height: 70px; gap: 8px; background: #fffaf3; } .end { align-self: flex-end; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div class="end">Внизу</div></div>

<style>
.row { display: flex; flex-wrap: wrap; align-content: space-between; height: 100px; width: 200px; gap: 4px; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div>Ручка</div><div>Блокнот</div><div>Линейка</div><div>Ластик</div></div>

<style>
.row { display: flex; gap: 6px; } .first { order: -1; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div class="first">Хит!</div></div>

<style>
.box { display: flex; justify-content: center; align-items: center; height: 80px; background: #fdf6ec; }
</style>
<div class="box">Ровно по центру</div>