JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" id="col" width="150px">
<span id="colSt">количество столбцов гистограммы</span><br>
<input type="button" value="create" id="butCreate"><br>
<input type="button" value="Вывести гистограмму" id="but">
<div id="dCommon"></div>

CSS

body {
            background-color: beige;
        }
        #col {
            width: 50px;
            margin-bottom: 10px;
        }
        span {
            font-family: Verdana;
            font-size: smaller;
        }
        p {
            font-family: Verdana;
        }
        .dd {
            width: 30px;
        }
        #dCommon {
            height: 220px;
            border-style: solid;
            background-color: white;
        }

JavaScript

but = document.getElementById('but');
but.style.display = 'none';
dCommon = document.getElementById('dCommon');
dCommon.style.display = 'none';
var resNumberNewStart = [];
var inpsText = [];
var inpsNumber = [];
resText = [];
resNumber = [];
var inputsAll = document.createElement('div');
inputsAll.setAttribute('id','inputsAll');
document.body.appendChild(inputsAll);
butCreate.onclick = function () {
  col.style.display = 'none';
  colSt.style.display = 'none';
  butCreate.style.display = 'none';
  for (var i = 0; i < col.value; i++) {
    inp1 = document.createElement('input');
    inp2 = document.createElement('input');
    sp1 = document.createElement('span');
    sp2 = document.createElement('span');
    sp1.style.marginRight = '5px';
    inp1.style.marginRight = '5px';
    sp2.style.marginRight = '5px';
    br = document.createElement('br');
    sp1.innerHTML = 'имя поля';
    sp2.innerHTML = 'число';
    inp1.setAttribute('type','text');
    inp2.setAttribute('type','number');
    inp1.setAttribute('class','textVal');
    inp2.setAttribute('class','textNumber');
    inp2.style.width = '50px';
    inpsText.push(inp1);
    inpsNumber.push(inp2);
    inputsAll.appendChild(sp1);
    inputsAll.appendChild(inp1);
    inputsAll.appendChild(sp2);
    inputsAll.appendChild(inp2);
    inputsAll.appendChild(br);
  }
  if(typeof inpsText[0] === 'undefined') {
    alert('ошибка');
    return;
  }
  inpsText[0].focus();
  var res = document.createElement('input');
  res.setAttribute('type','button');
  res.setAttribute('value','result');
  res.setAttribute('id','but');
  document.body.appendChild(res);
  res.onclick = function (){
    dCommon.style.display = 'block';
    dCommon.style.width = (80 * col.value) + 'px';
    col.style.display = 'none';
    butCreate.style.display = 'none';
    inputsAll.style.display = 'none';
    colSt.style.display = 'none';
    res.style.display = 'none';
    but.style.display = 'block';
    for (var i = 0; i < inpsText.length; i++) {
    ...