Как сделать так, чтобы контейнер соответствовал содержанию с перекрывающимися изображениями

Question

У меня есть проблема, с которой я боролся некоторое время.Контейнер не соответствует размеру изображения, и второй столбец, кажется, является первым столбцом, когда я использую position: absolute для изображений.

Я пытался изменить атрибут позиции для каждого элемента, но он не работал.

<div class="container">
  <div class="d-flex flex-row">
    <div class="p-12">
      <img class="e2e-trusted-url" src="data:image/png;base64,{{backgroundsList[currentBackground].image_url}}"
       style="position: absolute">
      <img class="e2e-trusted-url" src="data:image/png;base64,{{outlineColor.image_url}}"
       style="position: absolute">
      <img class="e2e-trusted-url" src="data:image/png;base64,{{fillingColor.image_url}}"
       style="position: absolute">
    </div>
    <div class="p-2" style="color: white">Form is going to be here</div>
  </div>
</div>

Я бы хотел сделать две «колонны» из двух элементов div.Первый должен включать три изображения RGBA одинакового размера, накладывающихся друг на друга (благодаря абсолютной позиции), а второй столбец должен быть формой.И контейнер должен уместиться на весь гибкий ряд.

Заранее спасибо за помощь!