JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <button data-view="horizontal" class="btn">Горизонтально</button>
  <button data-view="vertical" class="btn">Вертикально</button>
  <div class="card-wrapper active" data-view="horizontal">
    <div class="card">horizontal</div>
    <div class="card">horizontal</div>
    <div class="card">horizontal</div>
    <div class="card">horizontal</div>
  </div>
  <div class="card-wrapper" data-view="vertical">
    <div class="card">vertical</div>
    <div class="card">vertical</div>
    <div class="card">vertical</div>
    <div class="card">vertical</div>
  </div>
</div>

CSS

.card-wrapper {
  display: none;
  width: 600px;
}
.card-wrapper.active {
  display: flex;
}

.card-wrapper[data-view="horizontal"] {
  flex-direction: row;
}
.card-wrapper[data-view="horizontal"] .card {
  background: red;
  width: 150px;
  height: 150px;
  margin: 10px;
}


.card-wrapper[data-view="vertical"] {
  flex-direction: column;
}
.card-wrapper[data-view="vertical"] .card {
  background: green;
  width: 100%;
  height: 150px;
  margin: 10px;
}

JavaScript

document.querySelector('.wrapper').addEventListener('click', function(e) {
  const view = e.target.dataset.view;
  if (view && e.target.tagName === 'BUTTON') {
    document.querySelectorAll('.card-wrapper').forEach(n => {
      n.classList.toggle('active', n.dataset.view === view);
    });
  }
});