JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <form id="signupForm">
    <fieldset>
      <div class="field">
        <label>Your First Name: </label><br>
        <input type="text" id="firstName" name="firstName">
      </div><br>
      <div class="field">
        <label>Your Last Name: </label><br>
        <input type="text" id="lastName" name="lastName">
      </div><br>
      <div class="field">
        <label>Your Facebook Name: </label><br>
        <input type="text" id="fbName" name="fbName">
      </div><br>
      <div class="field">
        <select>
          <option value="--" selected>Select Your Grade</option>
          <option value="9">Gr.9</option>
          <option value="10">Gr.10</option>
          <option value="11">Gr.11</option>
          <option value="12">Gr.12</option>
          <option value="13">Gr.13</option>
        </select>
      </div>
      <br>
      <div class="field">
        <select>
          <option value="--" selected>Select Your Grade</option>
          <option value="1">Friend of Jonathan Martins</option>
          <option value="2">Friend of Laura Fong</option>
          <option value="3">Friend of Both</option>
          <option value="4">Not Friend of Either</option>
        </select>
      </div>
    </fieldset>
    <input type="submit" class="button" value="I Wanna Play">
  </form>
</body>

CSS

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: #f0f0f0;
/*    background: #000 url("http://wallpoper.com/images/00/24/84/22/assassins-creed_00248422.jpg") no-repeat; */
}

input, select {
    padding: 10px;
    width: 400px;
    font-size: 1em;
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    color: #848484;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px;
    box-sizing: content-box;
}

select {
    width: 420px;
}

#signupForm {
    border: 1px solid #ff0000;
    margin: auto;
    max-width: 430px;
}

fieldset {
    border: none;
}

.field {
    font-size: 1.3em;
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    vertical-align: middle;
    float: right;
    margin: 5px;
}

.button {
    margin: auto;
/*    max-width: 100px;*/
    text-align: center;
    cursor: pointer;
    display: inline-block;
    background: #8ebf31;
    margin: 0 10px 10px 10px;
    padding: 10px 20px 10px 20px;
    font-family: "MyriadProSemiBold", Helvetica, Arial, sans-serif;
    font-size: 0.85em;
    border: none;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px;
    -webkit-box-shadow: 0 6px 0px #739a27;
    -moz-box-shadow: 0 6px 0px #739a27;
    box-shadow: 0 6px 0px #739a27;
    color: #eaeaea;
    outline: none;
}

.button:active {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    position: relative;
    top: 6px;
}

JavaScript

$(document).ready(function () {
	$("#signupForm").css("margin-top", ($(window).height()/2)-(201));

	$(window).on("resize", function() {
		$("#signupForm").css("margin-top", ($(window).height()/2)-(201));

		if($(window).width() <= 430)
		{
			$(".field").css("float","left");
			$(".field").css("text-align","left");
			$(".field input").css("width", (($("#signupForm").width()-20) + "px"));
			$(".field select").css("width", (($("#signupForm").width()-10) + "px"));
		}
		else
		{
			$(".field").css("float","right");
			$(".field input").css("width", "400px");
			$(".field select").css("width", "420px");
		}
	});
});