JSFiddle - React, Tailwind, and code Playground

HTML

<form role="search" method="get" id="searchform" action="">
    <div class="row collapse">
        <div class="small-12 columns">
            <input type="subscribe" value="" name="subscribe" id="subscribe" placeholder="SUBSCRIBE"> <input type="search" value="" name="s" id="s" placeholder="SEARCH"> 
        </div>
    </div>
</form>

CSS

input[type="search"], input[type="subscribe"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;    
    outline: none;
    border: none;
    background: none;
    display: inline;
    width: 70px;
    font-size:14px;
    font-weight:500;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

input[type=search]:focus, input[type=subscribe]:focus {
    border-bottom: 3px solid #bcbbab;
    width: 100%;
    background: none;
}

input[type=subscribe]:focus + input[type=search] {
    display:none;
}

JavaScript

$(function(){
    $("#s").focus(function(){
    $("#subscribe").hide();
    });
    
    $("#s").focusout(function(){
    $("#subscribe").show();
    });
})