JSFiddle - React, Tailwind, and code Playground

HTML

<div class="searchbox">
<input type="text" />
<button id="clearSearch">x</button>
</div>
<button id="reset">reset</button>

CSS

.searchbox {
    float: right;
    position:relative;
}

.searchbox button{
    position: absolute;
    top:0; right:0;
}

JavaScript

$('#clearSearch').hide();
$('.searchbox input').keyup(function() {
    if(!$('.searchbox input').hasClass('animating') && ($('.searchbox input').val() !== '')) {
        if($('#clearSearch:hidden')) {
            $('.searchbox input').addClass('animating').stop().animate({marginRight: 20}, {queue: false, duration: 500});
            $('#clearSearch').stop().fadeIn(500);
        }
    }
});

$('#reset').click(function(){
    $('#clearSearch').hide();
    $('.searchbox input').css({marginRight: 0}).removeClass('animating');
    $('.searchbox input').val('');
});