JSFiddle - React, Tailwind, and code Playground

HTML

<div class="password-buttons passive">
    <input class="btn-pre-password" type="button" value="Download Premium docs" />
    <input type="password" placeholder="Please input secret code" />
    <input class="btn-post-password" type="button" value="Go" />
</div>

CSS

.password-buttons input{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float:left;
    height:30px;
}

.password-buttons input.btn-pre-password{
    width:100%
}
.password-buttons input[type="password"]{
    width:80%;
}
.password-buttons input.btn-post-password{
    width:20%;
}
.password-buttons.passive input[type="password"], .password-buttons.passive input.btn-post-password{
    display:none;
}
.password-buttons.active input.btn-pre-password{
    display:none;
}

JavaScript

$('.btn-pre-password','.password-buttons').on('click',function(){
    $(this).parent('.password-buttons').removeClass('passive').addClass('active');
});

$('.btn-post-password','.password-buttons').on('click',function(){
    $(this).parent('.password-buttons').removeClass('active').addClass('passive');
    /* Ajax action the check the password and process next step */
});