Auto widht and height in textarea

Question

I tried on several questions, but have not found the answer.

How do I get the textarea is set according to the size of the pattern "texdtart"?

#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;

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

</textarea></form></div>

Answer 1

I dont think this is possible directly through css. You can achieve this using javascript or jquery. Try this:

$(document).ready(function(){
    $(".textarea3").css("width", $(".textarea3:first").get(0).scrollWidth);
    $(".textarea3").css("height", $(".textarea3:first").get(0).scrollHeight+10);
});

Answer 2

Please check the fiddle https://jsfiddle.net/afelixj/4remtc67/

One step still pending to calculate the character width, to apply proper width. now it is hardcoded to 8. but it still works

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'
});