JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<meta name="viewport" content="width=device-width"/>

<body>
<div id="searchContainer">
<h1>Search For Race Results:</h1>
<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" value="✓" type="hidden">

<input name="first_name" id="first_name" value="Dave" placeholder="First Name" type="text"><input name="last_name" id="last_name" value="" placeholder="Last Name" type="text"><input name="event" id="event" value="" placeholder="Event" type="text"><input alt="Search" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" type="image">
</form></div>
</body>

CSS

#searchContainer {
  padding: 10px;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  background-color: tan;
  max-width: 1000px;
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  min-width: 300px;
}
#searchContainer * {
  box-sizing: border-box;
}
#searchContainer h1 {
  margin: 5px 0;
  font-size: 1.0em;
}
#search-form {
  width: 100%;
}
input[type="text"] {
  padding: 4px;
  vertical-align: middle;
  border: 1px solid #aaa;
}
#first_name,
#last_name {
  width: 22%;
  margin-right: 2px;
} 
  
#event {  
  width: 50%;
  margin-right: 2px;
}

#event {
  vertical-align: middle;
} 
  
.search_button {
  vertical-align: middle;
}
@media all and (max-width: 600px) {
  input[type="text"] {
    margin: 0 0 2px;
  }
  #first_name, 
  #last_name {
    display: block;
    width: 100%;
  }
  #event { 
    width: 93%;
  }
  .search_button {
    width: 5%;
  }
}