JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sub-menu-nav">
    <li class="sub-menu-top" data-parent="0" data-id="3">
        <h3><a href="#">Advertising</a></h3>
								<ul class="sub-sub-menu">
									<li><a href="#">Departments</a></li>
									<li><a href="#">Previous Commercials</a></li>
									<li><a href="#">Current Commercials</a></li>
									<li><a href="#">TechAnim</a></li>
								</ul>
    </li>
    <li class="sub-menu-top" data-id="16" data-parent="3">
        <h3><a href="#">Training</a></h3>
								<ul class="sub-sub-menu">
									<li><a href="#">Academy</a></li>
									<li><a href="#">All Tutorials</a></li>
									<li><a href="#">Pipeline</a></li>
									<li><a href="#">Digital Tutors</a></li>
                                    <li><a href="#">Intranet</a></li>
									<li><a href="#">Training</a></li>
									<li><a href="#">Tutorials</a></li>
									<li><a href="#">Feedback</a></li>
								</ul>
    </li>
</ul>

CSS

ul.sub-menu-nav {
	padding:0px;
	/*display: table-row;*/
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;



	flex-direction: row;
	-webkit-flex-direction: row;

	margin:0px;
}

ul li {
    list-style: none;

    display: inline;
}
ul {
    margin: 15px 0 0 0;
}
.sub-menu-nav > li > ul.sub-sub-menu {
	width:100%;
	margin:10px 0px;
	padding:0px;
}

.sub-menu-nav > li > ul.sub-sub-menu > li {
	width:100%;
	display:block;
	line-height:24px;
}
.sub-menu-nav > li > ul.sub-sub-menu > li a {
	line-height:20px;
	font-size:14px !important;
	color:#000 !important;
	text-decoration:none;
	padding:2px 20px !important;
}

.sub-menu-nav > li  {
	display:block;
	float:left;
	width:30%;
	margin:0px;	
	border-left:1px solid #cbcbcb;	
}