JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-wrapper">
                    
<input type="search" name="Ofsearch" placeholder="Search here..." value=""> 
<button id="searchButton" type="submit">Search</button>

</div>

CSS

.form-wrapper {
height: 80px;
background: #555;
color: #FFF;
clear: both;
}

.form-wrapper input {
    background-color: white;
	 border-radius: 10px;
	 border: 5px solid #E5E4E2;
	 margin: 2px;
	 height: 40px;
	 vertical-align: middle;
	 padding: 20px;
	 margin-top: 15px;
	 width: 85%;
}

.form-wrapper input {
background-color: white;
border-radius: 10px;
border: 5px solid #E5E4E2;
margin: 2px;
height: 40px;
vertical-align: middle;
padding: 20px;
margin-top: 15px;
width: 85%;
}
 .form-wrapper button {
overflow: visible;
position: absolute;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
color: #FFFFFF;
text-transform: uppercase;
background: #8E8CC2;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
margin: 20px -118px;
}