¿Cómo se colocarán si añadimos otros dos elementos internos dentro de outer? ¿Cómo colocarlos horizontalmente?

Si añades dos nuevos elementos internos dentro de un contenedor con la clase outer, por defecto se colocarán uno debajo del otro en vertical, ya que los elementos de bloque en HTML se disponen en columna.

Para colocarlos en horizontal, puedes usar CSS Flexbox. Por ejemplo:

.outer {
  display: flex;
  flex-direction: row; /* por defecto, puede no ser necesario especificarlo */
}

Esto hará que todos los elementos hijos de .outer se dispongan en línea (horizontalmente). Puedes agregar márgenes, alineación y otras propiedades para una configuración más precisa.