Comment seront-ils disposés si on ajoute deux autres éléments internes à l'intérieur de outer ? Comment les disposer horizontalement ?

Si vous ajoutez deux nouveaux éléments internes dans un conteneur avec la classe outer, ils seront par défaut disposés verticalement l'un sous l'autre, car les éléments de bloc en HTML s'organisent en colonne.

Pour les disposer horizontalement, vous pouvez utiliser CSS Flexbox. Par exemple :

.outer {
  display: flex;
  flex-direction: row; /* par défaut, il peut ne pas être nécessaire de le spécifier */
}

Cela fera en sorte que tous les éléments enfants de .outer soient alignés en ligne (horizontalement). Vous pouvez ajouter des marges, un alignement et d'autres propriétés pour un réglage plus précis.