JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	
		<div id="left">
			
			<h2>Actions</h2>
			
			<ul id="actions">
			
				<li><a href="#">View All Issues</a></li>
	 <li><a href="#">More Actions</a></li>
				
					
			</ul>
		
		</div>
		
		<div id="right">
        <div id="form-container"></div>
        <!--example isues-->
        <div id="accordion" style="display: block;">
            <div id="new-issues"></div>
            <div class="issue">
                <div class="title">
                    <div class="anchor"><span class="name">
						<h3>Broken White Board</h3></span>

                    </div>
                    <div class="status"><span class="incomplete"><h4>Incomplete</h4></span>

                    </div>
                </div>
                <div class="hide" style="display: none;">
                    <p class="description">Fell off the wall during class. Needs to be put back up.
                        <br>Thanks</p>
                    <p class="data">User: Administrator</p>
                    <p class="data">Location: R3</p>
                    <p class="data">Timestamp: 2014-02-15 13:05:56</p>
                </div>
            </div>
            <div class="issue">
                <div class="title">
                    <div class="anchor"><span class="name">
						<h3>White Board Fell Down</h3></span>

                    </div>
                    <div class="status"><span class="incomplete"><h4>Incomplete</h4></span>

                    </div>
                </div>
                <div class="hide" style="display: none;">
                    <p class="description">The whiteboard callapsed</p>
                    <p class="data">User: Administrator</p>
                    <p class="data">Location: Computer Room</p>
                    <p class="data">Timestamp: 2014-02-09 13:35:07</p>
                </div>
            </div>
            <div class="issue">
                <div class="title">
                    <div class="anchor"><span...

CSS

/* CSS */
 * {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
 }
 
 body {
	background: #f1f8ca;
 }
 
 #container {
	width: 800px;
	min-height: 300px;
	margin: 20px auto 20px auto;
 }
 
 #left {
	max-width: 200px;
	min-height: 150px;
	float: left;
	background: #1872c6;
	overflow: hidden;
 }
 
 #left h2 {
	font-size: 20px;
	color: #fff;
	padding: 20px 0px 10px 20px;
 }
 
 #actions {
	list-style-type: none;
 }
 
 #actions li a {
	text-decoration: none;
	width: 180px;
	height: 40px;
	font-size: 16px;
	line-height: 40px;
	color: #fff;
	padding-left: 20px;
	display: block;
	background: #1872c6;
 }
 
 #actions li a:hover {
	background: #6cadf7;
 }
 
.active {
	 background: #6cadf7 !important;
 }
 
 #right {
	width : 600px;
	min-height: 150px;
	float: right;
	background: #e8e8e7;
	padding-bottom: 20px;
	padding-top: 20px;
	overflow: hidden;
 }
 
 .issue {
	width: 550px;
	min-height: 20px;
	margin: 20px auto 0px auto;
	display: block;
 }
 
 .title {
	width: 550px;
	background: none;
	height: 40px;
	cursor: pointer;
 }
 
 .name {
	width: 400px;
	height: 40px;
	float: left;
	background: #e0d342;
 }
 
 .name h3 {
	font-size: 18px;
	color: #fff;
	line-height: 40px;
	padding-left: 20px;
 }
 
 .complete {
	width: 150px;
	background: #63c94b;
	float: right;
 }
 
 .complete h4 {
	font-size: 18px;
	line-height: 40px;
	color: #fff;
	text-align: center;
 }
 

.incomplete {
	width: 150px;
	background: #fb4444;
	float: right;
 }
 
.incomplete h4 {
	font-size: 18px;
	line-height: 40px;
	color: #fff;
	text-align: center;
}

.hide {
	width: 550px;
	background: #4d4d4d;
	overflow: hidden;
	padding-bottom: 20px;
}

.description {
	padding: 0 20px 0 20px;
	margin: 20px 0 20px 0;
	font-size: 15px;
	color: #fff;
}

.data {
	font-size: 14px;
	color: #fff;	
	padding-left: 20px;
	
}

#form-container h2 {
	font-size: 20px;
	color: #000;
	margin: 0px 0px 20px 50px;
}

#form {
	width: 500px;
	margin: 20px auto 20px auto;
}

label {
	float: left;
	clear: left;
	font-size: 18px;
	line-height:...

JavaScript

$('#accordion .hide').hide();
$('#accordion .title .anchor').click(function(){
		
	$(this).parent().next().slideToggle();
	return false;
			
});

$('#accordion .title span:last').click(function () {
		
	$('#accordion .hide').slideUp();
			
});

    $(document).on('click', function (e) {
        closeAllStatus();
        
        candidates = $(e.target).parents('.status');
        if (candidates.length > 0) {
            showDropdown(candidates[0]);
        }
    });

function closeAllStatus () {
    	$(".change-status").fadeOut("normal", function() {
			$(this).remove();
		});
}

function showDropdown(element){
		var checkComplete=$(element).children().hasClass("complete");
		
		var changeStatus="<div class=\"change-status\"></div>";
		$(element).after(changeStatus);
		
		if(checkComplete) {
			
			var statusType="<p class=\"mark\">Mark as Incomplete</p>";
			$(statusType).appendTo(".change-status");
			
		}
	
		else if(!checkComplete) {
			
			var statusType="<p class=\"mark\">Mark as Complete</p>";
			$(statusType).appendTo(".change-status");
			
		}		
			
	}