Обычный div
изначально ведет себя именно так - добавляет себе высоты по мере необходиомсти.
div {
background: black;
color:red;
padding:2em;
font-size:20px;
text-decoration:underline;
max-width:200px;
margin-right:2em;
display:inline-block;
vertical-align:top;
}
<div>
Тут меньше текста <br>
Строка текста <br>
Строка текста <br>
<b>Строка текста </b>
Строка текста <br>
Строка текста <br>
</div>
<div>
Тут больше текста <br>
И под него выделяется место <br>
Строка текста <br>
<b>Строка текста </b><br>
Строка текста <br>
<h1>Строка текста </h1>
Строка текста <br>
Строка текста
</div>
И, да, textarea
прекрасно обстиливается, в том числе и подчеркивание строк работает. А вот добавление высоты автоматом для textarea
как раз тот еще геморрой...
Обычно делают так: Создают нужный div
, поверх накладывают (или в него вкладывают) невидимую textarea
с теми же отступами-шрифтами-размерами и скрипт на каждое изменение в textarea
меняет содержимое div
'а.
Но самый труъ вариант - современный: добавить элементу атрибут contenteditable="true"
. Во: https://codepen.io/anon/pen/pMzEOK