Como eles serão dispostos se adicionarmos mais dois elementos internos dentro de outer? Como colocá-los horizontalmente?

Se adicionar dois novos elementos internos dentro de um contêiner com a classe outer, eles serão por padrão dispostos verticalmente um abaixo do outro, pois elementos de bloco em HTML são dispostos em coluna.

Para dispor horizontalmente, pode usar Flexbox CSS. Por exemplo:

.outer {
  display: flex;
  flex-direction: row; /* por padrão, pode não ser necessário especificar */
}

Isto fará com que todos os elementos filhos de .outer fiquem dispostos em linha (horizontalmente). Pode adicionar margens, alinhamento e outras propriedades para uma configuração mais precisa.