Два Абсолютных Дива сверху и снизу

Question

У меня есть два div, которые являются абсолютными. Я хочу, чтобы div1 был сверху, а div2 был под ним .. div1 может меняться в размере в зависимости от данных в нем, и я хочу, чтобы div2 мог идти с div1 соответственно.

<div class="div1"></div>
<div class="div2"></div>

Вот стиль, который у меня есть для div1:

.div1{
 list-style-type: none;
 text-align: center;
 width:55%;
 position: absolute;
 top:0;
 left:0;
}

Как я могу поместить его там, где div2 будет находиться под div1 и оставаться под ним в зависимости от того, насколько большим или маленьким становится div1?

.div2{
 width:55%;
 position:absolute;
 left:0;
}

Если необходимо задействовать javascript, ПОЖАЛУЙСТА, дайте только javascript. НЕ jquery.

Answer 1

Установить position: absolute для родителя:

<div class='div'>
  <div class='div1'></div>
  <div class='div2'></div>
</div>

И КСС:

.div {
  width: 55%;
  position: absolute;
  left: 0;
}

div1 { ... }
div2 { ... }

Answer 2

Вы можете использовать offsetHeight первого элемента div следующим образом:

const div1 = document.querySelector('.div1');
const div2 = document.querySelector('.div2');

console.log(div1.offsetHeight);

div2.style.top = div1.offsetHeight + 'px';

.wrapper {
  position: relative;
  height: 100%;
}

.div1{
 height: 50px;
 border: 1px solid green;
 text-align: center;
 width:55%;
 position: absolute;
 top:0;
 left:0;
}
.div2{
 width:55%;
 position:absolute;
 left:0;
 height: 50px;
 border: 1px solid green;
}

<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>