Если добавить ещё два inner-элемента внутрь outer, как они расположатся? Как расположить их горизонтально?

Если добавить два новых inner-элемента внутрь контейнера с классом outer, по умолчанию они расположатся вертикально один под другим, так как блочные элементы в HTML располагаются в колонку.

Чтобы расположить их горизонтально, можно использовать CSS Flexbox. Например:

.outer {
  display: flex;
  flex-direction: row; /* по умолчанию, можно не указывать */
}

Это заставит все дочерние элементы .outer располагаться в строку (горизонтально). Можно добавить отступы, выравнивание и другие свойства для более точной настройки.