JSFiddle - React, Tailwind, and code Playground

by thepio

HTML

<div id="loginArea">


  <div id="searchForm">
    <h4>
      Search For Results
    </h4>
    <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="http://image.flaticon.com/icons/png/128/49/49116.png" class="search_button">
    </form>
  </div>

</div>

CSS

/* Just some basic CSS declarations to start with */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

h4 {
  margin: 5px 0; /* Just to make the demo look nicer */
}

#loginArea {
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #CCCCCC;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80%; /* You could use anything here, depending if you have a wrapping parent etc */
}

#search-form {
  position: relative;
  display: flex;
  align-items: center; /* Not necessary but will center the items */
  flex-direction: row; /* Not necessary but tells that they should be in a row */
  justify-content: flex-start; /* Will align items to left on larger screens */
  flex-wrap: wrap; /* Will allow the flex inputs to wrap on smaller screens */
}

#search-form > * { /* You could give a class or element instead of asterix */
  margin: 0 10px 5px 0; /* Just to make it look nices */
  width: 25%; /* Width of text inputs, you could set them different from each other */
  min-width: 100px; /* Min width to wrap elements when small screen */
  flex: 1;
}

#search-form .search_button {
  max-height: 20px;
  flex: 0 0 20px; /* Keep the magnifying class proportioned/20px wide */
  min-width: 0px; /* Do not use the min-width declared above */
  margin: 0 0 5px 0;
}