JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<div id="loginArea">

<div id="searchForm">
	Search For Results<br />
	<div>
	<form id="search-form" action="/events/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="event" id="event" placeholder="Event" class="searchField">
		<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>	</div>
	</div>
  
</div>

CSS

body {
  background-color:grey;
}

#logo {
  margin: 0 auto;
  padding: 10px;
}

#searchForm {
  padding: 20px;
}

#search-form {
  display: flex;
  flex: 1 0 auto;
}

#first_name, #last_name { width: 20%; }
#event { } /* Do not specify width to allow it to grow freely */
.search_button { width: 40px; height: 40px; } /* Predefine image dimensions to ensure proper aspect ratio */

#loginLogos {
  margin: 0 auto;
  padding: 20px;
}

#loginArea {
  border-radius: 25px;
  font-size: 20px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 580px;
}

@media (max-width: 620px) {
  #search-form {
    flex-wrap: wrap;
  }
  
  #first_name, #last_name { width: 50%; }
  #event { width: calc(100% - 40px); }
}
.searchField {
  line-height: 40px;
  font-size: 22px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
}