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" class="searchField2 btcf">
		<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>	</div>

</div>

CSS

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.btcf:after {
  content: "";
  display: table;
  clear: both;
}
.searchField, .searchField2 {
    display: block;
    float: left;
    box-sizing: border-box;
    width: 25%;
}
.searchField2 {
  width: 50%;
}