JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loginArea">


	<div id="searchForm">
	Search For Results<br> 
	<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
		<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
		<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
		<input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
		<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>	</div>

</div>

CSS

* { box-sizing: border-box; }

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    
}

#searchForm input {
   float:left;
   width: 19%;
   margin: .25em 1% .25em 0;
}
#searchForm input#my_object {
   width: 39%;
}

/* Mobile Styles */
@media only screen and (max-width : 480px) {
 #loginArea {background-color:red;}

#searchForm input {
   width: 100%;
   margin-right: 0;
 }
 #searchForm input#my_object {
   width: 100%;
 }

}

/* Phablet (In-between mobile styles)
   -- in this case, same as mobile for consistency)
*/
@media only screen and (min-width : 481px) and (max-width : 767px) {
 #loginArea {background-color:yellow;}
 #searchForm input {
   width: 100%;
   margin-right: 0;
 }
 #searchForm input#my_object {
   width: 100%;
 }
}

/* Tablet Styles */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
 #loginArea {background-color:green;}
 
 #searchForm input {
   width: 48%;
   margin: .25em 1%;
 }
 #searchForm input#my_object {
   width: 98%;
 }
}