Как перестроить блок в другой ряд

Есть следующая задача, карточки расположены по две в ряд на десктопе и каждая имеет равную ширину, которая равна 50%, при клике на карточку добавляется класс active и эта карточка начинает занимать всю ширину экрана.

Проблема, если мы совершаем клик на левую карточку, то все происходит как нужно, карточка, которая находится справа идет вниз. Но, если мы кликнем на правую карточку, то карточка, которая находится слева останется на своем же месте и справа от нее будет пустое пространство. (Пример на картинке)

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

.items
{
  display: grid;
  grid-template-columns: 50% 50%;
}

.item
{
  padding: 50px;
  background-color: red;
  flex-basis: 43%;
  margin: 30px;
}

.item.active
{
  grid-column-start: 1;
  grid-column-end: 3;
  
  background-color: black;
}

<div class="items">
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>