JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col1">
<div id="overviews">
    <ul class="overviews-list margin-top-none showhouse-text">
											<li class="active">
												<a href="#" class="dropdown-toggle">
													<span class="icon-showhouse"><i class="icon-info"></i></span> Overview
													<b class="arrow icon-angle-right"></b>
												</a>
												<!-- BEGIN Submenu -->
												<ul class="submenu">
													<li class="active"><a href="#">Details</a></li>
													<li><a href="#">Landlords</a></li>
													<li><a href="#">Current Tenancies</a></li>
													<li><a href="#">Events</a></li>
												</ul>
												<!-- END Submenu -->
											</li>
											<li>
												<a href="#" class="dropdown-toggle">
													<span class="icon-showhouse"><i class="icon-camera"></i></span> Marketing
													<b class="arrow icon-angle-right"></b>
												</a>
												<!-- BEGIN Submenu -->
												<ul class="submenu">
													<li><a href="#">Details</a></li>
													<li><a href="#">Landlords</a></li>
													<li><a href="#">Current Tenancies</a></li>
													<li><a href="#">Events</a></li>
												</ul>
												<!-- END Submenu -->
											</li>
											<li>
												<a href="#" class="dropdown-toggle">
													<span class="icon-showhouse"><i class="icon-gears"></i></span> Configuration
													<b class="arrow icon-angle-right"></b>
												</a>
												<!-- BEGIN Submenu -->
												<ul class="submenu">
													<li><a href="#">Details</a></li>
													<li><a href="#">Landlords</a></li>
													<li><a href="#">Current Tenancies</a></li>
													<li><a href="#">Events</a></li>
												</ul>
												<!-- END Submenu -->
											</li>
											<li>
												<a href="#" class="dropdown-toggle">
													<span class="icon-showhouse"><i class="icon-random"></i></span> Activities
													<b class="arrow...

CSS

.overviews-list > li.active > ul.submenu > li.active {
    font-weight: bold!important;
    background-color: #252161;
    margin: 0 0 0 0px;
    font-size: 13px;
}


.col1{width: 30%; margin-right: 10%; float:left;}
.col2{width: 60%; float: left}
.overviews-list li [class^="icon-"] {
    width: 20px;
    margin: 11px 5px 0 0;
}
.overviews-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.overviews-list > li > a {
    display: block;
    height: 38px;
    line-height: 36px;
    margin:0;
    padding: 0 16px 0 7px!important;
    text-shadow: none!important;
    font-size: 13px;
    text-decoration: none;
}

.overviews-list > li > a .arrow {
    display: inline-block;
    width: 14px!important;
    height: 14px;
    line-height: 14px;
    text-shadow: none;
    font-size: 18px;
    padding: 0;
    float: right;
    margin-top: 11px;
}

.overviews-list > li.active .submenu,
.overviews-list > li.open .submenu {
    display: block;
}

.overviews-list > li.active > ul.submenu > li.active > a{color: #fff;}

.overviews-list > li.active > a,
.overviews-list > li.active > a:hover,
.overviews-list > li.active > a:focus,
.overviews-list > li.active > a:active {
    font-weight: bold!important;
    font-size: 13px;
}


.overviews-list > li .submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.overviews-list > li .submenu > li > a {
    display: block;
    position: relative;
    padding: 7px 0 8px 42px;
    margin: 0;
}

JavaScript

$('#overviews a.dropdown-toggle').click(function() {
		var submenu = $(this).next('.submenu');
		var arrow = $(this).children('.arrow');
		if (arrow.hasClass('icon-angle-right')) {
			arrow.addClass('anim-turn90');
		}
		else {
			arrow.addClass('anim-turn-90');
		}
		submenu.slideToggle(400, function(){
			if($(this).is(":hidden")) {
				arrow.attr('class', 'arrow icon-angle-right');
				$("#overviews.sidebar-fixed .nav").getNiceScroll().resize();
			} else {
				arrow.attr('class', 'arrow icon-angle-down');
				var winHeight = $(window).height() - 90;
			}
			arrow.removeClass('anim-turn90').removeClass('anim-turn-90');
		});
	});