JSFiddle - React, Tailwind, and code Playground

by DiceMasters

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search-box">
    <div class="search-box--inner">
        <input type="text" name="search">
        <button type="submit">
            <i class="fa fa-search" aria-hidden="true"></i>
        </button>
    </div>
</div>

<div class="search-box--end">
    <div class="search-box">
        <div class="search-box--inner">
            <input type="text" name="search">
            <button type="submit">
                <i class="fa fa-search" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

CSS

body{ margin: 20px }

.search-box{
    width: 30px; /* base width 250px */
    border-radius: 15px;
    background: black;
    transition: all .3s;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 30px;
}

.search-box--end{
    display: flex;
    justify-content: flex-end;
}

.search-box--inner{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 3px;
}

.search-box--inner > input{
    display: none; /* base d unset */
    height: 18px;
    width: 87.2%;
    background: white;
    border: none;
    border-radius: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.search-box--inner > button{
    width: 100%; /* base w 12.8% */
    background: transparent;
    border: none;
    color: white;
    transform: translate(-3px, -1px);
    cursor: pointer;
}

JavaScript

$('.search-box').hover( function(){
	$(this).width('250px')
    $(this).find('input').show()
    $(this).find('button[type="submit"]').width('12.8%')
}, function(){
	$(this).removeAttr('style')
    $(this).find('input').removeAttr('style')
    $(this).find('button[type="submit"]').removeAttr('style')
})