JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<div class="col-xs-12 col-md-7 view">
	<div id="panelviewer">	
		<div class="row">
            <div class="col-xs-12 col-md-6 panel1"><a href="javascript:void(0)">ONE</a></div>
            <div class="col-xs-12 col-md-6 panel2"><br><br><a href="javascript:void(0)">TWO</a></div>			
		</div>
	</div>		
</div>
</div>

CSS

.container {
    max-width: 600px;
    overflow: visible;
}
.view {
    border: dashed #333 1px;
    padding: 0;
}
.row {
    overflow:visible;
    position: relative;
    width: 100%;
    height: 50px; /* Or any desired value */
    margin: 0;
}
#panelviewer {
    position: relative;
}
.row > div {
    position: absolute;
    width: 100%;
}
.panel1       {
    display: block;
    background: #ccc;
}
.panel2       {
    display: block;
    background: #eee;
    left: 100%;
}

@media (min-width: 990px) {
	#panelviewer {
	    width: 671px;
    }
}

.open {
    left: -100%;
}

JavaScript

$('a').on('click',function(){
   $('#panelviewer').toggleClass('open'); 
});