JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<a href="#" class="show_hide">Compare</a>
<div class="row">

<div class="User_side userDiv col-12">
User side data
</div>
<div class="slidingDiv ">Data slide from right. <a href="#" class="show_hide">hide</a>
</div>

</div>

CSS

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
    width:50%
}


.userDiv{
   height:300px;
    background-color: #99CCcc;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}
.display-none{
  display:none;
}

JavaScript

$(document).ready(function () {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function () {
        $(".slidingDiv").toggle("slide", {direction: "right" }, 1000);
        $(".userDiv").toggleClass("col-12 col-6",1000);
    });

});