Как ще се разположат, ако добавим още два вътрешни елемента към outer? Как да ги разположим хоризонтално?

Ако добавите два нови вътрешни елемента в контейнер с клас outer, по подразбиране те ще се разположат вертикално един под друг, тъй като блоковите елементи в HTML се подреждат в колона.

За да ги подредите хоризонтално, можете да използвате CSS Flexbox. Например:

.outer {
  display: flex;
  flex-direction: row; /* по подразбиране, може да не е необходимо да се указва */
}

Това ще накара всички дъщерни елементи на .outer да се разположат в редица (хоризонтално). Можете да добавите отстояния, подравняване и други свойства за по-точна настройка.