JSFiddle - React, Tailwind, and code Playground

HTML

<p>Enter 12 letters</p>
    <input type="text" id= "userVal" size="12" value="abcdefghijkl" />
    <input type="button" id="btnSubmit" value="submit" />
    
<div id="output">
    
</div>

JavaScript

var createTable = function () {
    var numrows = Math.floor(Math.random()*3) + 1; // x3 gets 0, 1, or 2 so increment 1
    var numcols = 12 / numrows; // if always printing 12 chars
    var userText = $('#userVal').val();
    var output = "<table border='1'>";
    
    for (var i=0; i < numrows; i++)
    {
        output += "<tr>";
        for (var j=0; j<numcols; j++)
        {
            output += '<td>' + userText[i*numcols + j] + '</td>';
        }
    
        output += "</tr>";
    }

    output += "</table>";
    $('#output').html(output);
};

$(function() {
    $('#btnSubmit').on('click', function () {
        createTable();
    });
});