JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="input__container">
    <input class="input__resizable" placeholder="Введите ваше имя" maxlength="20"/>        
</div>

<div class="input__container">
    <input class="input__resizable" placeholder="Ваша фамилия" maxlength="20"/>        
</div>


<div class="input__container">
    <input class="input__resizable" placeholder="Возраст" maxlength="2"/>        
</div>

<div class="input__container">
    <input class="input__resizable" placeholder="Ваши увлечения" />        
</div>

CSS

.input__container {
    position: relative;
    border-radius: 6px;
    background-color: #eee;
    padding: 10px;
   margin-bottom: 10px;
    width: 150px;
    cursor: pointer;
}
.input__container:hover {
    background-color: #fff993;
}


.input__resizable {
    display: block;
    background: url("http://sherman.local/img/icon_edit.png") no-repeat 100% 45% transparent;
    border: 0; outline: 0;
    width: 100%;
    font-size: 20px;
    text-transform: uppercase;    
    cursor: pointer;
}

.input__resizable::-webkit-input-placeholder { /* WebKit browsers */
    color: #444;
}

JavaScript

$('.input__resizable').each(function(){ inputRescale($(this)); });


$('.input__resizable').blur(function(){
    
    $(this).css('background-image', 'url("http://sherman.local/img/icon_edit.png")').parent().css('background-color', '#eee');
    inputRescale($(this));
    
}).on('keydown', function(e){
    
    if (e.keyCode == 13) {
        
        $(this).blur();
        
        return false;
    
    }
    inputRescale($(this));
    
}).on('keyup', function(e){
    
    inputRescale($(this));
    
}).focus(function(){
    
    $(this).css('background-image', 'url("http://sherman.local/img/icon_edit_act.png")').parent().css('background-color', '#fff993');
    
});


function inputRescale(that) {
    var delta = 14;
    var symb = that.val().length * delta;
    if (symb == 0) { symb = that.attr('placeholder').length * delta; }
    that.parent().stop().animate({ 'width': symb + (delta * 3) }, 10);
}