JSFiddle - React, Tailwind, and code Playground

by afelixj

HTML

<div id="entry"><form><textarea class="textarea3" onclick="this.focus();this.select()" readonly="readonly" style=" width:"";height"">
_________________§§§§§§§§__________§§_____§§
_______________§§________§§_______§§§§___§§§§
_____________§§__§§§§§§§§__§§______§§_____§§
____________§§__§§______§§__§§______§§___§§
___________§§__§§___§§§__§§__§§_____§§§§§
___________§§__§§__§__§__§§__§§_____ §§§§§
___________§§__§§__§§___§§§__§§_____§§§§§
___________§§__§§___§§§§§§__§§_____§§§§§§
____________§§__§§_________§§_____§§§§§§
_______§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§
___§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§
</textarea></form></div>

CSS

#entry{float:center;clear:both;margin-top:40px;margin-bottom:25px;margin-left:auto;margin-right:auto;}
#entry textarea{margin-left:auto;margin-right:auto;line-height:100%;text-align:left;margin-top:0px;display:block;resize:none;
}

JavaScript

var ta = $("#entry textarea"),
    text = ta.val();

var lines = text.split("\n");

var count = lines.length;

var ll = 0;

for (var i=0;i<count;i++){
    if(lines[i].length > ll){
        ll = lines[i].length;
    }
}

var lh = parseInt(ta.css('line-height')),
    fs = parseInt(ta.css('font-size'));

ta.css({
    'height': count*lh,
    'width': ll*8 + 'px'
});