JSFiddle - React, Tailwind, and code Playground

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         {padding:0; background:olive;}
.row          {overflow:visible;}
#panelviewer  {position:relative;}
#panelviewer .row {white-space:nowrap; margin:0}
.panel1       {display:inline-block;float:none;background:#ccc; vertical-align:top}
.panel2       {display:inline-block;float:none;background:rgba(3,3,3,0.4); vertical-align:top}

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

.open		{right:100%;}

JavaScript

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