JSFiddle - React, Tailwind, and code Playground

HTML

<p>Количество гектаров</p>
<input type="text" name="inps"><span>Пшеница</span></br>
<input type="text" name="inps"><span>Рожь</span></br>
<input type="text" name="inps"><span>Ячмень</span></br>
<input type="text" name="inps"><span>Картофель</span></br>
<input type="text" name="inps"><span>Овес</span></br>
<input type="text" name="inps"><span>Гречиха</span></br>
<input type="button" value="Вывести гистограмму" id="but">
<div id="dCommon">
    <span name="s1" id="s1"></span>
    <span name="s1" id="s2"></span>
    <span name="s1" id="s3"></span>
    <span name="s1" id="s4"></span>
    <span name="s1" id="s5"></span>
    <span name="s1" id="s6"></span>
    <div id="d1" name = 'dd'></div>
    <div id="d2" name = 'dd'></div>
    <div id="d3" name = 'dd'></div>
    <div id="d4" name = 'dd'></div>
    <div id="d5" name = 'dd'></div>
    <div id="d6" name = 'dd'></div>
</div>
<span>Пшеница</span>
<span>-Рожь</span>
<span>-Ячмень</span>
<span>-Картофель</span>
<span>-Овес</span>
<span>-Гречиха</span>
<p id="pp"></p>

CSS

body {
            background-color: beige;
        }
        span {
            font-family: Verdana;
            font-size: smaller;
        }
        p {
            font-family: Verdana;
        }
        #dCommon {
            width: 350px;
            height: 220px;
            border-style: solid;
            background-color: white;
        }
        #s1 {
            position: absolute;
            left: 50px;
        }
        #s2 {
            position: absolute;
            left: 100px;
        }
        #s3 {
            position: absolute;
            left: 150px;
        }
        #s4 {
            position: absolute;
            left: 200px;
        }
        #s5 {
            position: absolute;
            left: 250px;
        }
        #s6 {
            position: absolute;
            left: 300px;
        }
        #d1 {
            position: absolute;
            width: 30px;
            background-color: blue;
            left: 50px;
            margin-top: 0px;
        }
        #d2 {
            position: absolute;
            width: 30px;
            background-color: darkgreen;
            left: 100px;
        }
        #d3 {
            position: absolute;
            width: 30px;
            background-color: brown;
            left: 150px;
        }
        #d4 {
            position: absolute;
            width: 30px;
            background-color: darkgoldenrod;
            left: 200px;
        }
        #d5 {
            position: absolute;
            width: 30px;
            background-color: green;
            left: 250px;
        }
        #d6 {
            position: absolute;
            width: 30px;
            background-color: darkred;
            left: 300px;
        }

JavaScript

var inps = document.getElementsByName('inps');
    inps[0].focus();
    but.onclick = function () {
    function anim(node) {
    var h = (parseInt(inps[i].value * 100 / summ)) * 2;
var start = 0;
var id = setInterval(function() {
node.style.height = start + 'px';
node.style.top = dCommon.offsetTop + parseInt(dComHeight) - start + 'px';
start++;
if (start == h || h <= 0) {
clearInterval(id);
}
} , 10)
    }
        try {
            var summ = 0;
            for (var i = 0; i < inps.length - 1; i++) {
                if (!inps[i].value) {
                    inps[i].value = 0;
                }
                summ += parseInt(inps[i].value);                             
            }
            if(isNaN(inps[i].value) || inps[i].value < 0 || summ == 0) {
                    throw new Error('неверный параметр');
                }
            var dCommon = document.getElementById('dCommon');
            var dComHeight = window.getComputedStyle(dCommon).height;
            var dds = document.getElementsByName('dd');
            for (var i = 0; i < dds.length; i++) {                
                anim(dds[i]);                 
            }
            var sps = document.getElementsByName('s1');
            for (var i = 0; i < sps.length; i++) {
                sps[i].innerHTML = parseInt(inps[i].value * 100 / summ) + '%';
            }
        }
        catch (e) {alert('Обработка исключения:' + e.name + ' | ' + e.message)};
    }