JSFiddle - React, Tailwind, and code Playground

by TheoI

HTML

<div class="input-container">
    <input class="back" />
    <input class="front" />
</div>

CSS

.input-container {
  position: relative;
  width: 50%;
}

input, .input-size {
  min-height: 25px;
  font-family: sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid;
  overflow: hidden;
  width: 100%;
}

input {
  height: 100%;
  position: absolute;
  resize:none;
  white-space: normal;
}

.input-size {
  position: absolute;
    top: 20px;
    min-width: 100%;
    width: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

JavaScript

var textContainer, textareaSize, input;
var autoSize = function () {
    if(input.scrollWidth >= input.offsetWidth) debugger;
  textareaSize.innerHTML = input.value + '\n';
};

document.addEventListener('DOMContentLoaded', function() {
  textContainer = document.querySelector('.input-container');
  textareaSize = textContainer.querySelector('.input-size');
  input = textContainer.querySelector('input');
  
  autoSize();
  input.addEventListener('input', autoSize);
});