Горизонтальное выравнивание контента с JavaScript на нескольких картах

Question

В настоящее время я пытаюсь найти решение для выравнивания указанного элемента между несколькими картами. Наименьшее смещение (означает положение) должно быть основой для других «элементов». Таким образом выравниваются по встроенным стилям затем.

let cards = document.getElementsByClassName("card");
const arr = [];
var x; //8px
const yPosC = [];

for (let i = 0; i < cards.length; i++) {
  cards[i].style.backgroundColor = "yellow";
  let yPosCard = cards[i].offsetTop;
  let rating = cards[i].querySelectorAll(".x");
  let yPosRating = rating[0].offsetTop;
  yPosC.push([yPosCard, yPosRating]);
  if (yPosCard != x) {
    x = cards[i].offsetTop;
  } else {
    x = cards[0].offsetTop;
  }
}

yPosC.forEach(function(key) {
  //console.dir(key[0]); // Rows
  //console.dir(key[1]); // Columns
  
  if (x === key[0]) {
    // Match values for first line
    console.log("woot");
  }
});

body {
  background: lightgrey;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: ;
  grid-template-areas: ". . . .";
  grid-gap: 1rem;
}
.card {
  background: #fafafa;
  padding: 1rem;
}
.x {
  background: red;
  margin-top: 30px;
}
.x.y {
  background: green;
  margin-top: 40px;
}

<div class="grid-container">
  <div class="card">One
    <div class="x">Line</div>
  </div>

  <div class="card">two
    <div class="x">Line</div>
  </div>

  <div class="card">three
    <div class="x">Line</div>
  </div>

  <div class="card">four
    <div class="x y">Line</div>
  </div>
  
    <div class="card">
    <div class="x">Wrapped</div>
  </div>
</div>

Может быть, мне просто нужен первый старт? Я попытался построить массивы из смещения Top, заданного самими картами и «элементом». Но что происходит потом? Повозиться и проиллюстрировать «задачу».

Я очень ценю вашу помощь.