Относительный элемент, не упаковывающий абсолютные контейнеры

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

Я дал ему попробовать, не смог решить. Поэтому, наконец, подумал, что хорошо спросить.

<style>
.relative{
  background:#ddd;
  position:relative;
  padding:10px; 
}

.front{
  background:red;
  position:absolute;
  top:0px;
}

.back{
  background:yellow;
  position:absolute;
  top:0px

}
</style>
<div class="relative">
  <div class="front">
  <h1>Front</h1>
  <p>This is the front side of the element and more fun is still to come</p>
  </div>
  <div class="back">
    <h1>Back</h1>
    <p>This is the back side of the element</p>
  </div>
</div>

Выше приведен код и следующая ссылка для codepen.io

Однако, если упоминание высоты - это только решение, я могу сделать неправильную разметку. Ожидание ответов.