Атрибут rows тега <textarea> — висота поля в рядках

HTML

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

<div>
    <p>З використання <code>rows</code> та зміною ширини шрифта</p>
<textarea id="textarea2" rows="2"></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 rows = document.getElementById("range").value;
  var textarea1 = document.getElementById("textarea1");
  var textarea2 = document.getElementById("textarea2");
  textarea1.setAttribute("rows", rows);
  textarea2.setAttribute("rows", rows);
  text.innerHTML = "Поточна висота поля " + rows + " символів";


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

HTML

<p>Без rows — типова висота у два рядки:</p>
<textarea name="a">Рядок 1
Рядок 2
Рядок 3
Рядок 4
Рядок 5
Рядок 6</textarea>

<p>rows="6" — видно всі шість:</p>
<textarea name="b" rows="6">Рядок 1
Рядок 2
Рядок 3
Рядок 4
Рядок 5
Рядок 6</textarea>

<p>rows="6", але CSS задає height: 3em — перемагає CSS:</p>
<textarea name="c" rows="6" class="fixed">Рядок 1
Рядок 2
Рядок 3
Рядок 4
Рядок 5
Рядок 6</textarea>

CSS

p { margin: .2em 0; font-weight: bold; }
textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: .35em;
  margin-bottom: 1em;
  resize: vertical;
}
.fixed { height: 3em; }