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" data-view="horizontal">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

CSS

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


.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="horizontal"] {
  width: 620px;
}


.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') {
    this.querySelector('.card-wrapper').dataset.view = view;
  }
});