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 " id="delete">Delete</button>
        <div class="form-slide">
            <div class="row">
                <div>
                    <button id="yes" type="button" class="btn btn-xs btn-block btn-primary">Yes</button>
                </div>
                <div>
                    <button id="no" 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

var deleteButton = document.getElementById("delete");
var yesButton = document.getElementById("yes");
var noButton = document.getElementById("no");

deleteButton.addEventListener("click", deleteButtonFunction);
yesButton.addEventListener("click", yesButtonFunction);
noButton.addEventListener("click", noButtonFunction);

function deleteButtonFunction() {
   deleteButton.classList.add("active");
}

function yesButtonFunction() {
   alert("yes");
   deleteButton.classList.remove ("active");
}

function noButtonFunction() {
   alert("no");
   deleteButton.classList.remove ("active");
}