JSFiddle - React, Tailwind, and code Playground

HTML

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>
<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

CSS

label{
    position: relative;
}

     .control{
        width: 600px;
        margin: auto;
     }

JavaScript

var timeoutIds = [];
$('.control').each(function(index, el) {
    $(':input', el).bind('focus', function(e) {
        clearTimeout(timeoutIds[index]);
        $(this).prevAll('label').animate({
            'left': '-50px'
        });
    });

    $(':input', el).bind('blur', function(e) {
        var that = this;
        timeoutIds[index] = setTimeout(function() {
            $(that).prevAll('label').animate({
                'left': '0px'
            });
        }, 500);
    });
});