Как предотвратить перемещение изображений во флекс-боксе друг за другом в зависимости от их размера?

Question

Я обновляю 2 изображения по клику, каждое из них, вероятно, имеет разный размер и соотношение каждый раз.Когда один из них меняется, другой следует.У меня они достаточно далеко друг от друга, поэтому им не нужно этого делать.Я хочу, чтобы они были независимыми, стабильными.

Я пробовал с и без flex-box.То же самое происходит всегда.Единственное, что работает, это установка абсолютного или фиксированного положения, но это, конечно, разрушает внешний вид.

section{
  display: flex;
  flex-direction: row;
  background-color: #fff;
  height: 100%;
}
#dog1, #dog2{
  display: flex;
  max-width: 400px;
  align-self: center;
  margin: 0 auto;
}

Answer 1

Спасибо всем, кто это проверил. Я заметил, что проблема возникла при изменении ширины, поэтому вместо максимальной ширины я установил для изображений особую ширину. Тем не менее, если бы я хотел, чтобы ширина была случайной и уникальной для каждой картинки, это не сработало бы. Но, по крайней мере, сейчас они стабильны. Если у кого-то есть идея, как это сделать, это было бы прекрасно.