Tengo dos `input` separados por un `<hr>`, uno en la parte superior (con `id="nombre"`) y otro en la parte inferior (con `id="txt"`).

A medida que escribo en el `input` superior, se va escribiendo lo mismo en el `input` inferior, esto sucede en tiempo real.

El problema está en que, el `input` inferior debería tener un ancho dinámico, dependiendo de la cantidad de caracteres en su interior, pero solamente funciona si hago clic en dicho `input` (inferior).


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function resizable(el, factor) {
      var int = Number(factor) || 7.7;

      function resize() {
        el.style.width = ((el.value.length + 1) * int) + 'px'
      }
      var e = 'keyup,keypress,focus,blur,change'.split(',');
      for (var i in e) el.addEventListener(e[i], resize, false);
      resize();
    }
    resizable(document.getElementById('txt'), 7);

    function fAgrega() {
      document.getElementById("txt").value = document.getElementById("nombre").value;
    }

<!-- language: lang-css -->

    body {
      text-align: center;
      padding: 20px
    }

    input {
      min-width: 30px!important;
      max-width: 200px!important;
      transition: width 0.25s;
      text-align: center;
    }

<!-- language: lang-html -->

    Ingrese su nombre: <input id="nombre" type="text" onkeyup="fAgrega();" />

    <hr> ¡Hola <input id="txt" type="text" class="preview_txt" onchange="resizable()" placeholder="you" />! Nos alegra tenerte aquí de nuevo.

<!-- end snippet -->

Lo que intenté fue asignar la función del ancho dinámico con un evento `onchange`, para que el evento se ejecute cuando el usuario cambie el contenido del campo de entrada o `input`. Claramente no funciona. ¿Alguna idea? 

Muchas gracias!