JSFiddle - React, Tailwind, and code Playground

HTML

<body>


			<div id = "wrapper">
            <form action="" class="search-form">
                <div class="cell">
                    <input type="text" name="q">
                </div>
                <div class="cell button-holder">
                    <button type="submit" id="dropdownbutton">
                        <span>Search</span> 
                    </button>    
                </div>
            </form>
			</div>
		


</body>

CSS

.search-form {
    display: table;
    border: 5px solid red;
    background: #fff;
    margin: 0 auto 30px auto;
}

.search-form .cell {
    display:table-cell; 
    vertical-align:middle;
}

.search-form input {
   font-size: 1.3em;
    height: 50px;
    border: none;
}

.search-form button {
    display:block;
    border: none;
    background-color: red;
    height: 50px;
    vertical-align: top;
    cursor: pointer;
}

.button-holder {
    background-color: red;
}

#dropdownbutton{
visibility: hidden; 
}

JavaScript

$("#wrapper").onclick(function (e){

document.getElementById('#dropdownbutton').style.visibility = 'visible';
}

$(document).mouseup(function (e)
{

    var container = $("#wrapper");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $("#dropdownbutton").hide();
    }
});
 
});