Выравнивание 4 делений в 2 столбцах с отдельным содержанием и z-индексом. HTML | CSS

Question

Я выполняю это выравнивание divs относительно отдельного контента, который расположен за div, которые вы хотите выровнять:

Используйте экранную сетку для исправления div, но теперь у меня проблема с прокруткой div.

Основной div: Этот div скрыл еще один div, который прокручивается с небольшой анимацией с Jquery, если вы нажмете на белую стрелку, прокручивает его содержимое (которое является другим div), в равной степени если вы хотите закрыть, он скрывается при повторном нажатии. В действительности я использую Z-индекс, чтобы иметь возможность обрабатывать эти 2 элемента.

Теперь, когда я делаю анимацию (состоит из медленного перемещения div ). с моей функцией jquery div с классом (contains-child) перекрывает основной div, и вам нужно, чтобы он находился за оранжевым контейнером.

Если я нажму на стрелку, чтобы скрыть абзац, она сделает

, и в этот момент div готов подняться, прячась за оранжевой рамкой.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 170px);
  padding: 30px;
  grid-gap: 73px 157px;
  position: absolute;
  z-index: 0;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 40px;
  font-size: 30px;
  text-align: center;
  width: 218px;
  position: relative;
  background: linear-gradient(rgb(208, 130, 30), rgb(208, 66, 10));
  border-radius: 12px;
  Z-index: 99;
}

.grid-item-child {
  width: 217px;
  height: 100%;
  background: linear-gradient(rgba(1596, 223, 167, 0.88), rgba(149, 45, 40, 0.66));
  border-radius: 11px;
}

.contain-child {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: 0.5s;
}

<div class="grid-container">
  <div class="grid-item">
    <i class="fas fa-ruler-horizontal"></i>
    <div class="arrow1">
      <i class="fas fa-angle-down"></i>
    </div>

    <div class="contain-child">

      <div class="grid-item-child">2</div>
      <!--Hijos-->

    </div>

  </div>
</div>

Мне бы хотелось, чтобы div содержал содержимое на go в обратном направлении от основного div (оранжевая рамка). Не могли бы вы помочь мне в этом?

Редактировать: я использую эту функцию для кодирования моих дел. Это Jquery.

$(function () {
$('.arrow1').click(function(e){
    $('.contain-child').toggleClass('active');
        $('').toggleClass('rotate');
                $('.grid-item').toggleClass('slide');
});

});

Добавление классов:

.active {
    transform: translateY(99%);
}

.grid-item.slide {
    transform: translateY(-5%);
    transition: 0.5s
}
.rotate
{
    transform: rotate(180deg);
    transform-origin: center center;