Wie werden sie angeordnet, wenn wir noch zwei Innenelemente in outer hinzufügen? Wie kann man sie horizontal anordnen?

Wenn Sie zwei neue innere Elemente in einen Container mit der Klasse outer hinzufügen, werden diese standardmäßig vertikal untereinander angeordnet, da Blockelemente in HTML in einer Spalte angeordnet werden.

Um sie horizontal anzuordnen, können Sie CSS Flexbox verwenden. Zum Beispiel:

.outer {
  display: flex;
  flex-direction: row; /* standardmäßig, muss möglicherweise nicht angegeben werden */
}

Dies bewirkt, dass alle Kind-Elemente von .outer in einer Zeile (horizontal) angeordnet werden. Sie können Abstände, Ausrichtung und andere Eigenschaften hinzufügen, um eine genauere Einstellung vorzunehmen.