Ako pridáme ešte dva vnútorné prvky do outer, ako budú usporiadané? Ako ich horizontálne usporiadať?

Ak pridáte dva nové vnútorné prvky do kontajnera s triedou outer, budú predvolene usporiadané zvisle jeden pod druhým, pretože blokové prvky v HTML sa usporadúvajú v stĺpci.

Na ich horizontálne usporiadanie môžete použiť CSS Flexbox. Napríklad:

.outer {
  display: flex;
  flex-direction: row; /* predvolené, nemusí byť nutné špecifikovať */
}

Toto spôsobí, že všetky deti prvky .outer budú usporiadané v riadku (horizontálne). Môžete pridať medzery, zarovnanie a ďalšie vlastnosti pre presnejšie nastavenie.