JSFiddle - React, Tailwind, and code Playground

by Shady Alset

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body>


<div class="container" id="searchBar">
		<div class="row">
			<div class="col-md-12">
				<form action="./" method="POST" autocomplete="on">
					<div class="input-group" id="adv-search">
						<input type="text" class="form-control"
							placeholder="Search for snippets" id="mainForm" name="searchBox" />
						<div class="input-group-btn">
							<div class="btn-group" role="group">
								<div class="dropdown dropdown-lg">
									<button type="button" class="btn btn-default dropdown-toggle"
										 aria-expanded="false">
										<span class="caret"></span>
									</button>
									<span class="dropdown-menu dropdown-menu-right" role="menu">
										<div class="form-horizontal" role="form">
											<div class="form-group">
												<label for="filter">Filter by</label> <select
													class="form-control" name="docType">
													<option value="0" selected>All Sources</option>
													<option value="1">option 0</option>
													<option value="2">option 1</option>
													<!-- <option value="4">Most commented</option> -->
												</select>
											</div>
											<div class="form-group">
												<label for="contain">Author / Modifier</label> <input
													class="form-control" type="text" name="authorName" />
											</div>
											<div class="form-group">
												<label for="contain">Contains the words</label> <input
													class="form-control" type="text" name="words" />
											</div>
											<!-- <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> -->
										</div>
									</span>
								</div>
								<button...

CSS

body {
    height: 800px;
}

.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}
.input-group-btn .btn-group {
    display: flex !important;
}
.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
    height: 3.5em;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}
.form-group .form-control:last-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#mainForm{
    height: 3.5em;
}

@media screen and (min-width: 768px) {
    #adv-search {
        width: 500px;
        margin: 0 auto;
    }
    .dropdown.dropdown-lg {
        position: static !important;
    }
    .dropdown.dropdown-lg .dropdown-menu {
        min-width: 500px;
    }
}

JavaScript

$('.dropdown-lg .btn').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

$('body').on('click', function (e) {
    if (!$('.dropdown-lg').is(e.target) 
        && $('.dropdown-lg').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('.dropdown-lg').removeClass('open');
    }
});