Атрибут cols тега <textarea> — ширина поля в символах

HTML

<p>Приклад використання  <code>cols</code> для <code>textarea</code></p>
<p id="text"></p>
<p id="text2"></p>
  <p><input type="range" id="range" min="0" value="20" max="100" step="1" name="range">
    <input type="button" value="Встановити cols" onclick="f()"></p>
  <input type="range" id="range2" min="0" max="100" step="1" name="range2">
<input type="button" value="Встановити ширину шрифту" onclick="f()">
<hr>
<div class="content">
<div>
   <p>Без використання <code>cols</code></p>
  <textarea ></textarea>
</div>
<div>
    <p>З використання <code>cols</code></p>
<textarea id="textarea1" cols="20"></textarea>
</div>  

<div>
    <p>З використання <code>cols</code> та зміною ширини шрифта</p>
<textarea id="textarea2" cols="20"></textarea>
</div>  
</div>

CSS

*{margin:0;
text-align:center;}

.content{
  display: flex;
  justify-content: center; 
}

.content div{
  float:left;
  padding:10px;
}

JS

text.innerHTML = "Поточна ширина поля " + 20 + " символів.";

function f() {
  var cols = document.getElementById("range").value;
  var textarea1 = document.getElementById("textarea1");
  var textarea2 = document.getElementById("textarea2");
  textarea1.setAttribute("cols", cols);
  textarea2.setAttribute("cols", cols);
  text.innerHTML = "Поточна ширина поля " + cols + " символів";


  var Font_size = document.getElementById("range2").value;
  textarea2.style.fontSize = Font_size + "px";
  text2.innerHTML = "Поточна ширина символа " + Font_size + " px";
}
//# sourceURL=pen.js

HTML

<p><label for="t1">Без cols — типові 20 символів і 2 рядки</label></p>
<textarea id="t1"></textarea>

<p><label for="t2">cols="40" — той самий шрифт, удвічі ширше</label></p>
<textarea id="t2" cols="40"></textarea>

<p><label for="t3">cols="40", але шрифт удвічі більший — і поле теж</label></p>
<textarea id="t3" cols="40" class="big"></textarea>

<p><label for="t4">cols="80" і width: 240px у стилях — виграє CSS</label></p>
<textarea id="t4" cols="80" class="narrow"></textarea>

CSS

p {
    margin: 16px 0 4px;
}

label {
    font-weight: 600;
}

textarea {
    font: 15px/1.4 ui-monospace, monospace;
    padding: 4px;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

.big {
    font-size: 30px;
}

.narrow {
    width: 240px;
}