display: flex crea un contesto flex sul contenitore; flex-direction definisce l'asse principale; justify-content e align-items distribuiscono e allineano gli elementi flex.
flex: 1 su un figlio fa crescere la quota disponibile; gap imposta spaziatura tra gli item.
Esempio
.header-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}