create_span.js

/*
  THIS IS ONLY DONE ONCE
  
  there-on we just keep changing the textContent of the $span.
*/

const css = getComputedStyle($input);
const r = $input.getBoundingClientRect(); // to get the position, width & height of $input

const $span = document.createElement('span'); // our ghost span

$span.style.cssText = `
    width: ${r.width}px;
    height: ${r.height}px;
    left: ${r.left}px;
    top: ${r.top}px;
    z-index: -10;
    opacity: 0.4;
    position: absolute;
    white-space: pre-wrap;
    font-size: ${parseInt(css.fontSize)}px;
    padding-left: ${parseInt(css.paddingLeft)}px;
    padding-top: ${parseInt(css.paddingTop) + 1}px; // + 1 just to get a perfect alignment :p
`;

document.body.appendChild($span);