JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<div class="container">
  <span class="text">
    1
  </span>
  <input class="input" value="1" />
</div>

CSS

.container {
      display: inline-block;
      position: relative;
    }
    
    .input,
    .text {
      margin: 0;
      padding: 2px 10px;
      font-size: 24px;
      line-height: 32px;
      border: 1px solid #ccc;
      box-radius: 3px;
      height: 36px;
      font: 20px/20px sans-serif;
      /* font: they should use same font; */
    }

    .text {
      display: inline-block;
      visibility: hidden;
      white-space: pre;
      padding-right:0;
    }
    
    .input {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      padding-right:0;
    }

JavaScript

$(function () {
      $('.input').on('input', function () { $('.text').text($('.input').val()); });
    });