JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<body>

<div id="pagewrap">	
	<aside id="sidebar">

		<section id="pannel_front_1" class="pannel">
			<h4 class="pannel_title">Pannel 1</h4>
			<span class="flip_div div_menu" attached-with="pannel_back_1" >Settings</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consequat.</p>
		</section>
        
        <section id="pannel_back_1" class="pannel" style="display:none">
			<h4 class="pannel_title">Back Side 1</h4>
            <span class="flip_div div_menu" attached-with="pannel_front_1">back</span>
                <p>Back Side.</p>
         </section>
		<section id="pannel_front_2" class="pannel">
			<h4 class="pannel_title">Pannel 2</h4>
			<span class="flip_div div_menu" attached-with="pannel_back_2" >Settings</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
		</section>
        
        <section id="pannel_back_2" class="pannel" style="display:none">
			<h4 class="pannel_title">Back Side 2</h4>
            <span class="flip_div div_menu" attached-with="pannel_front_2">back</span>
                <p>Back Side.</p>
         </section>
		<section id="pannel_front_3" class="pannel">
			<h4 class="pannel_title">Pannel 3</h4>
			<span class="flip_div div_menu" attached-with="pannel_back_3" >Settings</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</section>
        
        <section id="pannel_back_3" class="pannel" style="display:none">
			<h4 class="pannel_title">Back Side 3</h4>
            <span class="flip_div div_menu" attached-with="pannel_front_3">back</span>
                <p>Back Side.</p>
         </section>
		<section id="pannel_front_4" class="pannel">
			<h4 class="pannel_title">Pannel 4</h4>
			<span class="flip_div div_menu" attached-with="pannel_back_4" >Settings</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
		</section>
        
        <section id="pannel_back_4"...

CSS

/************************************************************************************
									Reset
*************************************************************************************/
*{
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: 0;
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
	margin:0
}

/************************************************************************************
									General Styling
*************************************************************************************/
body {
	font: .81em/150% Arial, Helvetica, sans-serif;
	color: #666;
	
}
a {
	color: #026acb;
	text-decoration: none;
	outline: none;
}
a:hover {
	text-decoration: underline;
}
p {
	
	padding: 0;
	margin:0
}

/* list */
ul, ol {
	margin: 1em 0 1.4em 24px;
	padding: 0;
	line-height: 140%;
}
li {
	margin: 0 0 .5em 0;
	padding: 0;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.4em;
	margin: 20px 0 .4em;
	color: #000;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.6em;
}
h3 {
	font-size: 1.4em;
}
h4 {
	font-size: 1.2em;
}
h5 {
	font-size: 1.1em;
}
h6 {
	font-size: 1em;
}

/************************************************************************************
									Structure
*************************************************************************************/
#pagewrap {
	margin: 0 auto;
	width:1005px;
}

#sidebar {
	width: 545px;
	margin: 30px 0 30px;
}
.pannel {
	background: red;
	margin: 0 5px 10px;
	padding: 10px 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	box-shadow: 0 1px 3px rgba(0,0,0,.4);
	float:left;
	width: 80px;
	min-height:200px;
	color: rgb(207, 207, 207);
}
.pannel_title {
	margin: 0 0 5px;
	padding: 0;	
	background: #bbb;
	cursor: move;
}
.pannel ul {
	margin: 0;
	padding: 0;
}
.pannel li {
	margin: 0;
	padding: 6px 0;
	list-style: none;
	clear: both;
	border-top: solid 1px...

JavaScript

$(document).ready(function(){
	$(function() {
		$( "#sidebar" ).sortable({
		  connectWith: ".pannel",
		}).disableSelection();
	  });
	  
	  $('.flip_div').click(function() {
			var page1 = $(this).parent();
			var page2 = $('#'+$(this).attr('attached-with'));
			var toHide = page1.is(':visible') ? page1 : page2;
			var toShow = page2.is(':visible') ? page1 : page2;
			
			toHide.removeClass('flip in').addClass('flip out').hide();
			toShow.removeClass('flip out').addClass('flip in').show();
		});
					
});