css - HTML formatting so that my form doesn't look bad -

this question has answer here:

• html form layout css 4 answers

i'm trying make html form looks good. formatting little off. trying make form responsive. need first name , last name on 1 line. address on next. city , state on third , email , phone number on fourth , submit button , privacy link on last. have tried using table within table , wasn't good.

my questions how fix fields line together. right address bar shorter others. lines different lengths , want make them same length , have them line correctly. here sample

:before, :after {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }    p, li {    letter-spacing:-0.05vw;  }  h1 {   letter-spacing:-0.3vw;  }    #p3 {    background-color:white;  }    table {    border:0;    padding:0;    border-collapse:collapse;   }    div {       float:left;  }    .btn {   font-family:oswald-regularitalic;    font-size:1.2vw;    width:25%;    display:block;  	float:left;  	margin-left:2%;  	background-color:#00a151;  	height:2.5vw;  	border: 0 none;  	color:white;  	margin-bottom:10%;  	  }     #p3 h3 {    color:#00a151;    font-size:2vw;    font-family:oswald-regularitalic;    margin:10% 0 5% 0;    padding:0;  }    #p3 div {   margin:0;  }  #fname, #lname, #address, #city, #state , #zip, #phone{    height:35px;  	line-height:35px;  	font-size:20px;  	border: 1px solid #1b75b7;  }    #fname, #lname, #address, #city, #state {    margin-bottom:3px;  }  #fname {   margin-right:4px;}    #fname, #lname{  	float:left;  	display:inline-block;  	white-space:nowrap;  	width:48%;  }    #address {    width:97%;  }    #city {    width:86%;  }  #state {    width:10%;  }  #zip, #phone {    margin-bottom:20px;  }  #zip {    width:40%;  }  #phone {    width:56%;  }    #p3 input::-webkit-input-placeholder { /* webkit browsers */      font-size:1.2vw;  	color:#1b75b7;  	font-family:oswald-bolditalic;  	padding-left:25px;  }  #p3 input:-moz-placeholder { /* mozilla firefox 4 18 */      font-size:1.2vw;  	color:#1b75b7;  	font-family:oswald-bolditalic;  	padding-left:25px;  }  #p3 input::-moz-placeholder { /* mozilla firefox 19+ */      font-size:1.2vw;  	color:#1b75b7;  	font-family:oswald-bolditalic;  	padding-left:25px;  }  #p3 input:-ms-input-placeholder { /* internet explorer 10+ */      font-size:1.2vw;  	color:#1b75b7;  	font-family:oswald-bolditalic;  	padding-left:25px;  }  #p3 #state::-webkit-input-placeholder { /* webkit browsers */      font-size:1.2vw;  	color:#1b75b7;  	font-family:oswald-bolditalic;  	padding-left:0;  }  #p3  #state:-moz-placeholder { /* mozilla firefox 4 18 */     font-size:1.2vw;  	color:#1b75b7;  	font-family:oswald-bolditalic;  	padding-left:0;  }  #p3  #state::-moz-placeholder { /* mozilla firefox 19+ */    font-size:1.2vw;  	color:#1b75b7;  	font-family:oswald-bolditalic;  	padding-left:0;  }  #p3  #state:-ms-input-placeholder { /* internet explorer 10+ */     font-size:1.2vw;  	color:#1b75b7;  	font-family:oswald-bolditalic;  	padding-left:0;  }  #p3 .submitbtn {   margin:0 10% 10% 0;  }    p3 p {    font-size:14px;  }  #p3 .privacy {    font-size:1vw;    font-family:oswald-regularitalic;    cursor:pointer;  }

<table width="100%" id="p3" cellpadding="0" cellspacing="0">      <tr>  	  <td width="100%" colspan="3" align="center"><h3>where send brochure , dvd?</h3>  	  </td>  	</tr>  	<tr>  	  <td width="25%"></td>  	  <td width="50%">  	    <form class="contactform" method="post" action="send.php">            <div>              <input name="fname" type="text"  placeholder="first name"id="fname" required>  			<input name="lname" type="text"  placeholder="last name"id="lname" required><br>  			<input name="address" type="text"  placeholder="address"id="address" required>  			<input name="city" type="text"  placeholder="city" id="city" required>  			<input name="state" type="text"  placeholder="state" id="state" maxlength="2" onkeyup="this.value = this.value.replace(/[^a-z]/, '')"  required>  			<input name="zip" type="text"  placeholder="zip code" id="zip" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" maxlength="2" required>  			<input name="phone" type="tel"  placeholder="phone" id="phone" required>  			<input class="btn submitbtn" id="send" value="send it!" type="submit">  			<p class="privacy">privacy policy</p>            </div>  		</form>  	  </td>  	  <td width="25%"></td>  	</tr>    </form>    </table>

you shouldn't using tables format, rule ironclad, tables tabular data.

furthermore non-responsive, terrible on mobile devices (resize , see yourself).

i recommend use framework make life easier. bourbon / neat if you're familiar sass or perhaps pure css if aren't.

tip: don't hesitate put inputs on new lines, scrolling down less of problem might think, make full use of horizontal screen real-estate.