<div id="lineCount"></div>
<div contentEditable id="content"></div>
 #content {
    text-align: left;
    resize: none;
    min-height: 2.5rem;
    max-height: 400px;
    width: 100%;
    overflow-y: auto;
    display: inline-block;
    border: solid 1px #B7B7B7;
    white-space: pre-wrap;
    word-spacing: 0;
    word-wrap: break-word;
    box-sizing: border-box;
    margin-top: -1px;
}
window.onload = function () {
  content.addEventListener('keyup', function(e) {
    lineCount.textContent = e.target.textContent.match(/\n/g).length;
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.