JSFiddle - React, Tailwind, and code Playground

HTML

<button>Перемешать</button>
<div class="questions">
  <div>
    <h4>Вопрос 1</h4>
    <p>Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса. Текст 1 вопроса.</p>
  </div>
  <div>
    <h4>Вопрос 2</h4>
    <p>Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса. Текст 2 вопроса.</p>
  </div>
  <div>
    <h4>Вопрос 3</h4>
    <p>Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса. Текст 3 вопроса.</p>
  </div>
  <div>
    <h4>Вопрос 4</h4>
    <p>Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса. Текст 4 вопроса.</p>
  </div>
  <div>
    <h4>Вопрос 5</h4>
    <p>Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5 вопроса. Текст 5...

CSS

.questions > div {
  font: 12px Arial;
  width: 500px;
  margin: 10px 0;
  padding: 5px;
  border: 1px solid black;
}

  .questions > div > :first-child {
    margin-top: 0;
  }

  .questions > div > :last-child {
    margin-bottom: 0;
  }

JavaScript

var button = document.querySelector("button");

// Назначаем перемешивание на клик по кнопке
button.addEventListener("click", shuffleQuestions, false);



function shuffleQuestions() {
  // Получаем блоки вопросов
  var questions = document.querySelectorAll(".questions > div");

  // Преобразуем набор в обычный массив
  questions = Array.prototype.slice.call(questions);

  // Перемешиваем его
  shuffleArray(questions);

  // Переставляем в новом порядке на странице
  questions.forEach(function(item) {
    item.parentNode.appendChild(item);
  });
}

// Служебная функция, перемешивающая массивы
function shuffleArray(array) {
  var counter = array.length, temp, index;

  while (counter > 0) {
    index = Math.floor(Math.random() * counter);

    counter--;

    temp = array[counter];
    array[counter] = array[index];
    array[index] = temp;
  }

  return array;
}