JSFiddle - React, Tailwind, and code Playground

by gmdavis62

HTML

<div class="control"><div class="button">+</div><select name="join" class="join"><option value="AND">AND</option><option value="OR">OR</option></select></div>

CSS

body {
	font-family: Arial, Helvetica, sans-serif;
	padding: 4em;
}
div.control{position:relative; display:block;}
div.button {position:absolute; top:0; left:0; padding:2px; text-align:center; display:inline-block; width:1em; height:1em; border:2px outset gray; background-color:#ccc;}
div.button:hover{background-color:#eee;}
select.join{position:absolute; top:0; left:-99px;}

JavaScript

$(document).ready(function(){
	$(".button").mousedown(function(){
		//$(this).css('display','none');
		$(this).siblings('select.join').trigger(click).css('left','0');
		//console.log($(this).siblings('select.join'));
	});
});