JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  Ваше имя:
  <input type="text" class="input" placeholder="напиши здесь свое имя">
</div>
<div>
  Ваш e-mail:
  <input type="text" class="input" placeholder="напиши здесь свой e-mail">
</div>

CSS

.input,
.buffer {
  font-family: Arial, Verdana, sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.input {
  border: none;
  min-width:200px;
}

.buffer {
  position: absolute;
  top: -1000px;
  left: -1000px;
  visibility: hidden;
  white-space: nowrap;
}

JavaScript

var input = document.querySelectorAll('.input'),
  buffer = [];
for (var i = 0; input.length > i; i++) {
  console.log(input[i].value);
  buffer[i] = document.createElement('div');
  buffer[i].className = "buffer";
  //вставляем скрытый div.buffer
  input[i].parentNode.insertBefore(buffer[i], input[i].nextSibling);

  input[i].oninput = function() {
    this.nextElementSibling.innerHTML = this.value;
    this.style.width = this.nextElementSibling.clientWidth + 'px';
  };
}