JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" style="width: 70px; max-height: 100px;" class="txt" />
<button>Change value of txt</button>

JavaScript

// Debe llamarse al plugin antes de construir cualquier referencia al elemento.
// El nuevo elemento debe seleccionarse por id, por name o por clases.
// En el momento de llamar al plugin el elemento debe estar visible.

// Translate:
// The plugin must be called before saving any reference to the element.
// The new element must be selected by its id, name or classes, not by the tag "input".
// When the plugin is called the element must be visible.

$.fn.acceptMultiline = function() {
    var txt = $(this),
        txtArea = $("<textarea></textarea>");
    
    if (txt.attr("style") != undefined)
        txtArea.attr("style", txt.attr("style"));
    
    if (txt.attr("class") != undefined)
        txtArea.attr("class", txt.attr("class"));
    
    if (txt.attr("name") != undefined)
        txtArea.attr("name", txt.attr("name"));
    
    if (txt.attr("id") != undefined)
        txtArea.attr("id", txt.attr("id"));
    
    txtArea
        .width(txt.width())
        .height(txt.height())
        .css("resize", "none");
    
    txt .after(txtArea)
        .remove();
    
    txtArea.on("input", function() {
        txtArea.val(txtArea.val().replace(/\r\n/g, " ").replace(/\r/g, " ").replace(/\n/g, " "));
    });
};

$(":text").acceptMultiline();

$("button").on("click", function() {
    $(".txt").val($(".txt").val() + "pepe");
});