JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-anim-right-click">
    <div class="form-group">
        <button type="button" class="btn btn-xs btn-block btn-primary delete ">Delete</button>
        <div class="form-slide">
            <div class="row">
                <div>
                    <button type="button" class="btn btn-xs btn-block btn-primary">Yes</button>
                </div>
                <div>
                    <button type="button" class="btn btn-xs btn-block btn-secondary">No</button>
                </div>
                <div>
                    <input type="text">Text</div>
            </div>
        </div>
    </div>
</div>

CSS

.form-anim-right-click {
    position: relative;
    overflow: hidden;
}
.form-anim-right-click > .form-group {
    width: 200%;
}
.form-anim-right-click > .form-group > .btn {
    width: 50%;
    display: inline-block;
    float: left;
    -o-transition: transform 0.3s ease-out;
    -webkit-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
.form-anim-right-click > .form-group > .btn.active {
    -o-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
.form-anim-right-click > .form-group > .btn.active + .form-slide {
    -o-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
.form-anim-right-click .form-slide {
    width: 50%;
    display: inline-block;
    float: left;
    -o-transition: transform 0.3s ease-out;
    -webkit-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
.form-anim-right-click .form-slide > .row {
    margin-left: 0;
    margin-right: 0;
    padding: 0 4px;
}
.form-anim-right-click .form-slide > .row > div {
    display: inline-block;
}
.form-anim-right-click .form-slide > .row >[class^="col-"] {
    padding: 0 2.66666667px;
}
.form-anim-right-click .form-slide > .row label {
    margin-bottom: 0;
    line-height: 1.6em;
    font-family:"SourceSansPro", Helvetica, Arial, sans-serif;
    color: #01273c;
}
.form-anim-right-click .form-slide > .row .btn-xs {
    padding-left: 4px;
    padding-right: 4px;
    z-index: 10000;
}

JavaScript

$('.delete').click(
    function () {
        $(this).addClass("active");
    }
);

$('.delete').blur(
    function (event) {
        setTimeout(function(){
        	$('.delete').removeClass("active");
        }, 100);
    }
);

$('.form-slide button').click(
    function () {
        $('.delete').removeClass("active");
        alert($(this).text());
    }
);