Cum vor fi plasate dacă adăugăm încă două elemente interne în interiorul outer? Cum le putem poziționa orizontal?

Dacă adăugați două elemente interne noi într-un container cu clasa outer, acestea vor fi, implicit, aranjate vertical, unul sub altul, deoarece elementele bloc în HTML sunt dispuse în coloană.

Pentru a le aranja orizontal, puteți folosi CSS Flexbox. De exemplu:

.outer {
  display: flex;
  flex-direction: row; /* implicit, poate fi omis */
}

Aceasta va face ca toate elementele copil ale .outer să fie aranjate pe un rând (orizontal). Puteți adăuga margini, aliniere și alte proprietăți pentru o configurare mai precisă.