JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap2" class="wrap" style="display:block">
				<ul>
					<li>DB_users</li>
					<li>DB_spamers</li>
					<div class="secondMenu" style="display:block">
						<ul id="query">
							<li class="userID" style="display:block"><span>userID</span><input type="text"></li>
							<li class="userName" style="display:block"><span>userName</span><input type="text"></li>
							<li class="userLogin" style="display:block"><span>userLogin</span><input type="text"></li>
							<li class="lastMessageDate" style="display:block"><span>lastMessageDate</span><input type="text"></li>
							<li class="spamCount" style="display:none"><span>spamCount</span><input type="text"></li>
						</ul>
						<ul id="data">
							<li class="userID" style="display:block"><span>userID</span><input type="text"></li>
							<li class="userName" style="display:block"><span>userName</span><input type="text"></li>
							<li class="userLogin" style="display:block"><span>userLogin</span><input type="text"></li>
							<li class="lastMessageDate" style="display:block"><span>lastMessageDate</span><input type="text"></li>
							<li class="spamCount" style="display:none"><span>spamCount</span><input type="text"></li>
							<li class="upsert" style="display:block"><span>upsert</span><input type="checkbox" value=""></li>
							<li class="multi" style="display:block"><span>multi</span><input type="checkbox" value=""></li>
						</ul>
					</div>
				</ul>
			</div>

CSS

.menulist {
				border: 1px solid #000;
				display: inline-block;
				background: #999;
				font-family: arial;
				color: #fff;
				padding: 1px 15px 1px 15px;
				border-radius: 3px;
				font-weight: 600;
				margin-right: 6px;
				line-height: 19px;
			}
			
			.wrap {
				border-radius: 3px;
				width: 110px;
				border: 1px solid black;
				background: #5b5d63;
				color: #eee;
				display: none;
				position: absolute;
			}
			
			#wrap2 {left: 84px;}
		
			
			ul {
			    list-style-type: none;
				margin: 3px 5px;
				padding: 0;
				font-weight: bold;
				font-family: Garamond;
			}
			
			ul li {padding: 3px;}
			.wrap > ul > li:hover {
				background: #dcdcdc;
				color: #000;
			}
			
			.secondMenu > ul > li {display: none;}
			.wrap .secondMenu > ul > li > input {
				margin: 0;
				padding: 0;
				width: 100%;
			}
			
			#wrap2 .secondMenu > ul > li > input {
				width: 100px;
				float: right;
				margin-left: 5px;
				padding: 0px;
			}
			
			.secondMenu {
				border-radius: 3px;
			  min-width: 110px;
				border: 1px solid black;
				background: #5b5d63;
				color: #eee;
				display: none;
				position: absolute;
			  max-width: 131px;
			}
			
			#wrap2 .secondMenu {
				max-width: 500px;
        min-width: 395px;
			}
      
      #wrap2 .secondMenu ul {
        max-width: 49%;
        margin: 0;
        padding: 0;
      }
			
			#query {
			  display: inline-block;
				margin: 3px 2px 3px 5px;
			}
			
			#data {
				display: inline-block;
				border-left: 1px solid gray;
				margin: 3px 5px 3px 2px;
			}
			
			.upsert input, .multi input {
				width: 13px !important;
				margin: 0;
				position: relative;
				top: 2px;
				margin-left: 3px;
			}
			
			.upsert, .multi {
				float: left;
			}