JSFiddle - React, Tailwind, and code Playground

HTML

<input id="input" type="number" value="25" min="25" max="100" />
<div id="container" class="row">

</div>

CSS

div {
  display: flex;
  flex-direction: row;
}
.column {
  margin: 0 5px;
  flex-direction: column;
}

.

JavaScript

document.getElementById("input").addEventListener("input", (e)=>{
 	const container = document.getElementById("container");
  while (container.firstChild) {
    container.removeChild(container.firstChild);
}
 
	let max = e.currentTarget.value;
  let arr = [];
  for (let i = 0; i < max; i++) {
  	arr.push(i + 1);
  }
  
  arr = arr
  	.sort(() => 0.5 - Math.random())
  	.slice(0, 25)
    .sort((a, b) => a - b);
  
  const result = [];
  for (let i = 0; i < 25; i+=5) {
  	result.push(arr.slice(i, i + 5));
  }
  
  result.forEach((items) => {
  	const column = document.createElement('div');
   	column.className = "column";
  	items.forEach((item) => {
    	const itemBlock = document.createElement('div');
    	itemBlock.innerHTML += item;
      column.appendChild(itemBlock);
    });
    container.appendChild(column);
  });
  
})