Kako će biti raspoređeni ako dodamo još dva unutrašnja elementa unutar outer? Kako ih rasporediti horizontalno?

Ako dodate dva nova unutrašnja elementa unutar kontejnera sa klasom outer, oni će po defaultu biti raspoređeni vertikalno jedan ispod drugog, jer blok elementi u HTML-u se raspoređuju u kolonu.

Da biste ih rasporedili horizontalno, možete koristiti CSS Flexbox. Na primer:

.outer {
  display: flex;
  flex-direction: row; /* po defaultu, možda nije potrebno navesti */
}

Ovo će učiniti da svi deca elementi .outer budu raspoređeni u liniji (horizontalno). Možete dodati razmake, poravnanje i druge osobine za preciznije podešavanje.