Сделать на одном уровне название пункта и значение в grid cell

Question

Есть grid таблица со спойлером, открывающимся при нажатии на верхнюю строчку с данными таблицы. Как сделать чтобы каждое название пункта и его значение в спойлере было на одном уровне вне зависимости от количества контента? пункт 1 на одном уровне со значением 1, пункт 2 значение 2...[ссылка на пример][1]

<div class="grid-table-row spoiler-body">
       <div class="grid-table-cell">
           <p class="add-action__text text-show">пункт 1</p>
           <p class="add-action__text text-show">пункт 2</p>
           <p class="add-action__text text-show">пункт 3</p>
       </div>
       <div class="grid-table-cell">
           <p class="add-action__change">1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.Odit, itaque eum.Lorem ipsum dolor sit</p>
           <p class="add-action__change">2 Lorem ipsum </p>
           <p class="add-action__change">3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit, itaque eum. </p>
       </div>
    </div

`[1]: https://jsfiddle.net/2etcu1m7/

Answer 1

white-space: nowrap; заставляет текс не перейти на другую линию

let arrows = document.querySelectorAll('.add-action__item');

arrows.forEach((elem) => {
  elem.addEventListener('click', () => {
    elem.querySelector('.add-action__show').classList.toggle('item-open')
  })
})


const headers = document.querySelectorAll("[data-name='spoiler-title']");

headers.forEach(function(item) {
  item.addEventListener("click", headerClick);
});

function headerClick() {
  this.nextElementSibling.classList.toggle("spoiler-body");
}

.grid-table {
  display: grid;
  height: 200px;
  background-color: #f3f3f3;
  overflow-x: hidden;
}

.grid-table-row {
  display: grid;
  grid-template-columns: 1fr 3fr 30px 30px;
  padding: 12px 18px 12px 12px;
}

.grid-table-row.spoiler-body {
  padding-top: 0;
}

.text-show:first-child {
  padding-top: 0;
}

.add-action__list {
  padding-top: 22px;
}

.add-action__item {
  border-top: 2px solid #E5E5F2;
}

.add-action__item:first-child {
  border-top: none;
}

.add-action__text {
  color: #51515C;
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
}

.add-action__buttons {
  display: flex;
}

.add-action__change {
  font-weight: 700;
  white-space: nowrap;
}

.add-action__edit {
  border: none;
  background-color: transparent;
  padding-right: 16px;
}

.add-action__show {
  border: none;
  background-color: transparent;
}

.item-open {
  transform: rotate(180deg);
  padding-left: 14px;
  padding-right: 1px;
}

.spoiler-body {
  display: none;
}

.text-show {
  padding-top: 12px;
}

<div class="grid-table add-action__list">

  <div class="grid-table-row add-action__item list-group-item" data-name="spoiler-title">
    <div class="grid-table-cell add-action__text">Название</div>
    <div class="grid-table-cell add-action__change">Значение</div>
    <div class="grid-table-cell add-action__buttons add-action__edit">btn</div>
    <div class="grid-table-cell add-action__buttons add-action__show">Х</div>
  </div>

  <div class="grid-table-row spoiler-body">
    <div class="grid-table-cell">
      <p class="add-action__text text-show">пункт 1</p>
      <p class="add-action__text text-show">пункт 2</p>
      <p class="add-action__text text-show">пункт 3</p>
    </div>
    <div class="grid-table-cell">
      <p class="add-action__change" style="margin: 17px 0; font-size: 17px;">1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.Odit, itaque eum.Lorem ipsum dolor sit</p>
      <p class="add-action__change" style="padding-top: 12px; margin: 17px 0; font-size: 17px;">2 Lorem ipsum </p>
      <p class="add-action__change" style="padding-top: 12px; margin: 17px 0; font-size: 17px;">3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit, itaque eum. </p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Сделать на одном уровне название пункта и значение в grid cell

Ответы (1 шт):