JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>input and textarea caret-position testing ground</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
    <script src="../index.js"></script>  <!-- this will trigger an `Uncaught ReferenceError: module is not defined`, which can be safely ignored -->
  </head>
  <body>


    <h2><code>&lt;input type="text"></code></h2>
    <div class="side-by-side">
      <div class="col">
        <input type="text" size="15" maxlength="240" placeholder="Enter text here">
      </div>

    <h2><code>&lt;textarea></code></h2>
    <div class="side-by-side">
      <textarea rows="2" cols="20" id='t1' name="usrtxt" wrap="soft">
          I'am only one line without line breaks.Add a single line for testing; 
      </textarea>
    </div>

    <script>
      ['input[type="text"]', 'textarea'].forEach(function (selector) {
        var element = document.querySelector(selector);
        //var fontSize = getComputedStyle(element).getPropertyValue('font-size');

        //var rect = document.createElement('div');
//        document.body.appendChild(rect);
 //       rect.style.position = 'absolute';
  //      rect.style.backgroundColor = 'red';
   //     rect.style.height = fontSize;
    //    rect.style.width = '1px';

        ['keyup', 'click'].forEach(function (event) {
         element.addEventListener(event, update);
        });
	
        var originTop;
        function update() {
          var coordinates = getCaretCoordinates(element, element.selectionEnd, { debug: true });
          console.log('(top, left, height) = (%s, %s, %s)', coordinates.top, coordinates.left, coordinates.height);
          var nextLine = coordinates.top + coordinates.height;
         ...

JavaScript

/* jshint browser: true */

(function () {

// We'll copy the properties below into the mirror div.
// Note that some browsers, such as Firefox, do not concatenate properties
// into their shorthand (e.g. padding-top, padding-bottom etc. -> padding),
// so we have to list every single property explicitly.
var properties = [
  'direction',  // RTL support
  'boxSizing',
  'width',  // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
  'height',
  'overflowX',
  'overflowY',  // copy the scrollbar for IE

  'borderTopWidth',
  'borderRightWidth',
  'borderBottomWidth',
  'borderLeftWidth',
  'borderStyle',

  'paddingTop',
  'paddingRight',
  'paddingBottom',
  'paddingLeft',

  // https://developer.mozilla.org/en-US/docs/Web/CSS/font
  'fontStyle',
  'fontVariant',
  'fontWeight',
  'fontStretch',
  'fontSize',
  'fontSizeAdjust',
  'lineHeight',
  'fontFamily',

  'textAlign',
  'textTransform',
  'textIndent',
  'textDecoration',  // might not make a difference, but better be safe

  'letterSpacing',
  'wordSpacing',

  'tabSize',
  'MozTabSize'

];

var isBrowser = (typeof window !== 'undefined');
var isFirefox = (isBrowser && window.mozInnerScreenX != null);

function getCaretCoordinates(element, position, options) {
  if (!isBrowser) {
    throw new Error('textarea-caret-position#getCaretCoordinates should only be called in a browser');
  }

  var debug = options && options.debug || false;
  if (debug) {
    var el = document.querySelector('#input-textarea-caret-position-mirror-div');
    if (el) el.parentNode.removeChild(el);
  }

  // The mirror div will replicate the textarea's style
  var div = document.createElement('div');
  div.id = 'input-textarea-caret-position-mirror-div';
  document.body.appendChild(div);

  var style = div.style;
  var computed = window.getComputedStyle ? window.getComputedStyle(element) : element.currentStyle;  // currentStyle for IE < 9
  var isInput = element.nodeName === 'INPUT';

 ...