Какой эффективный способ добавить «свойство top» к существующей вершине для всех элементов под выбранным элементом в CSS или Javascript?

Question

У меня есть контейнер с абсолютно позиционированными элементами div. Я хочу отобразить набор абсолютно расположенных элементов div один под другим с постоянным верхним значением 40px. Поэтому, когда я создаю div из JSON, я увеличиваю значение top для всех элементов.

    let topVal = 0

    function fetchItem(data) {
        title = data.title;
        el = document.createElement("div");
        el.className = "row";
        el.innerHTML = `${title}`;
        el.style.top = topVal + "px";
        topVal += 40;
        container.appendChild(el);
    }

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

container.addEventListener('click', function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;
    target.setAttribute("class", "row active");
    let newEl = document.createElement("div");
    newEl.className = "expand-box";
    target.appendChild(newEl);
    appendTopToNextSiblings()
}, false);

function appendTopToNextSiblings() {
    var list;
    list = document.querySelectorAll(".row.active ~ div");
    for (var i = 0; i < list.length; ++i) {
        let temp = parseInt(list[i].style.top) + 50 + "px";
        list[i].style.top = temp;

    }
}

Я обрабатываю это всего за 1 клик прямо сейчас .

Я не могу изменить абсолютную позицию этих элементов. Есть ли лучший способ добавить вершину ко всем этим элементам или любой другой лучший способ справиться с этой ситуацией? Я хочу добиться этого в чистом виде javascript или CSS.

Будем благодарны за любые предложения!

Я прикрепил ссылку на скрипку здесь https://jsfiddle.net/ytebvazj/2/

Answer 1

попробуй margin-top: 10px

.expand-box {
height: 50px;
margin-top: 10px;
background: paleturquoise;
width: 80%;
border: 1px solid grey;
border-radius: 5px;
position: absolute;
display: flex;
justify-content: center;}