JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="input_text" value="hfjkhdfshdfkjhkfhsdfjhskjdfhskjdhfkjdsjklsjdslkdjlkhfkjhdsfskjhfdskjhfskdh"/>
<input type="text" class="input_text" value="1"/>
<input type="text" class="input_text"/>
<input type="text" class="input_text" value="hfjkhdfshdfkjhkfhsdfjhskjdfhskjdhfkjdlkasjkldjlakjdshfkjhdsfskjhfdskjhfskdh"/>
<input type="text" class="input_text"/>

CSS

input
{
    
    margin:10px;
   |
}

JavaScript

$(".input_text").each(function(index, obj){
    var txt = $(this),
        txtLength = txt.val().length;
    if(txtLength <= 1){
        txt.height("25px");
    }else{
        var txtarea = $("<textarea/>");
        txt.replaceWith(txtarea.val(txt.val()));
    }
});