JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loginArea">

<div id="searchForm">
	Search For Results<br> 
	<div style="vertical-text-align:center;">
	<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" style="width:25%; min-width: 100px;">
		<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:25%; min-width: 100px;">
		<input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width: 40%; min-width:100px;">
		<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
</form>	</div>
	</div>
  
</div>

CSS

#search-form input{
  float:left;
}
input.search_button {
  max-width:10%;
}
@media (max-width: 580px) {
  input#event {
    clear:left;
  }
}
/**************************/
body {
  background-color:grey;
}

/* line 1, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/login.css.scss */
#logo {
  display: table;
  margin: 0 auto;
  padding: 10px;
}

/* line 7, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/login.css.scss */
#searchForm {
  padding: 20px;
}

/* line 11, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/login.css.scss */
#loginLogos {
  display: table;
  margin: 0 auto;
  padding: 20px;
}

/* line 17, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/login.css.scss */
#loginImages {
  display: table;
  margin: 0 auto;
}

/* line 22, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/login.css.scss */
.loginImg {
  padding: 1px;
}

/* line 26, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/login.css.scss */
#loginArea {
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
  display: table;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 580px;
}

@media (min-width: 850px) {
  /* line 43, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/login.css.scss */
  #loginArea {
    white-space: nowrap;
  }
}
/* line 48, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/login.css.scss */
.searchField {
  display: table-cell;
  line-height: 40px;
  font-size: 22px;
  margin: 0;
  vertical-align: middle;
  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;
 ...