If two more inner elements are added inside outer, how will they be arranged? How to arrange them horizontally?

If you add two new inner elements inside a container with the class outer, by default they will be arranged vertically one below the other, since block elements in HTML are laid out in a column.

To arrange them horizontally, you can use CSS Flexbox. For example:

.outer {
  display: flex;
  flex-direction: row; /* by default, can be omitted */
}

This will make all child elements of .outer be laid out in a row (horizontally). You can add margins, alignment, and other properties for more precise customization.