Jak budou uspořádány, pokud přidáme ještě dva vnitřní prvky do outer? Jak je umístit horizontálně?

Pokud do kontejneru s třídou outer přidáte dva nové vnitřní prvky, výchozí chování je, že se uspořádají svisle jeden pod druhým, protože blokové prvky v HTML jsou uspořádány ve sloupci.

Pro jejich uspořádání horizontálně můžete použít CSS Flexbox. Například:

.outer {
  display: flex;
  flex-direction: row; /* výchozí, nemusí být nutné uvádět */
}

Toto způsobí, že všechny děti .outer budou uspořádány v řádku (horizontálně). Můžete přidat mezery, zarovnání a další vlastnosti pro přesnější nastavení.