Come si disporranno se aggiungiamo altri due elementi interni all'interno di outer? Come posizionarli orizzontalmente?

Se aggiungi due nuovi elementi interni all'interno di un contenitore con la classe outer, per impostazione predefinita si disporranno uno sotto l'altro in verticale, poiché gli elementi di blocco in HTML si dispongono in colonna.

Per disporli orizzontalmente, puoi usare CSS Flexbox. Ad esempio:

.outer {
  display: flex;
  flex-direction: row; /* di default, potrebbe non essere necessario specificarlo */
}

Questo farà sì che tutti gli elementi figli di .outer siano disposti in riga (orizzontalmente). Puoi aggiungere margini, allineamento e altre proprietà per una configurazione più precisa.