JSFiddle - React, Tailwind, and code Playground

HTML

<form id="calcForm">
    <div id="outercalcTextArea">
        <div id="calcTextArea" contenteditable="true">
            
        </div>
    </div>
    <div id="calcButton"><center><button id="submit" type="submit">Submit</button></center></div>
</form>

CSS

#outercalcTextArea{
    background: none repeat scroll 0 0 #FFFFFF; 
	border: 1px solid #C9C9C9; 
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset, -5px -5px 0 0 #F5F5F6, 5px 5px 0 0 #F5F5F6, 5px 0 0 0 #F5F5F6, 0 5px 0 0 #F5F5F6, 5px -5px 0 0 #F5F5F6, -5px 5px 0 0 #F5F5F6; 
	border-radius: 2px 2px 2px 2px;
    min-width: 400px;
    width:auto;
    font-size:12px;
    height:200px;
    
    white-space:nowrap;
    
}

#calcTextArea { 
	width:100%;
    height:100%;
    padding: 8px;
    padding-left:21%;
    box-sizing:border-box;
}

#calcButton{
    padding-top:10px;
    width: 400px;}

#calcForm {
    width:400px;
    height:auto;
    margin:auto;}

#solTitles {
    display:inline-block;
    margin-right:20px;}

#solStats{
    display:inline-block;}

#solWrap {
    margin:auto;}

JavaScript

function calcSD(e){
    e.preventDefault();
    var data = document.getElementById("calcTextArea").innerHTML;

    function parseData(data){
        var dataArray = [];
        var index = 0;
        var decimalFlag = false;
    
        for(i = 0; i< data.length; i++){
            if(data.charCodeAt(i) >= 48 && data.charCodeAt(i) <= 57){
                if(dataArray[index] === undefined){
                    dataArray.push("");}
                dataArray[index] += data.charAt(i);}
            else if(data.charCodeAt(i) === 46){
                if(decimalFlag === false && dataArray[index] === undefined && data.charCodeAt(i+1) >= 48 && data.charCodeAt(i+1) <= 57){
                    dataArray.push("");
                    dataArray[index] += data.charAt(i);
                    decimalFlag = true;}
                else if(decimalFlag === false && dataArray[index] !== undefined){
                    dataArray[index] += data.charAt(i);
                    decimalFlag = true;}
                else if(decimalFlag === true){
                    index+= 1;
                    dataArray.push("");
                    dataArray[index] += data.charAt(i);
                    decimalFlag = true;}}
            else if(dataArray[index] !== undefined){
                index+= 1;
                decimalFlag = false;}
        }
        return dataArray;
    }

    var dataArray = parseData(data);

    function calculateMean(dataArray){
        return dataArray.reduce(function(x,y){ return x + parseFloat(y,10);}, x = 0) / dataArray.length;
    }

    var mean = calculateMean(dataArray);

    function calcStandardDeviation(dataArray, mean){
        var solutions = [];
        var differences = dataArray.map( function(x){return x - mean;});
        differences = differences.map(function(x){ return x*x; });
        var sum = differences.reduce(function(x,y){ return x + y;}, x = 0);
        solutions.push(Math.sqrt(sum/differences.length));
       ...