如何使用HTML / CSS制作响应式两栏联系表单？

Question

这是我的HTML表单代码，我尝试将每个输入框分隔为不同的div，以将它们放置在彼此相邻的不同列中。我还想确保表单位于页面中心，并且不会占用屏幕的全部空间。我正在尝试为联系表格的4个输入框填写两列。但是我也希望我的textarea和Submit按钮在与其他输入区域对齐的一列中。我的表单继续显示为断点，并且输入区域重叠而没有间距。：

    
    input, textarea{
    	font-family: 'Kelly Slab', cursive;
    	margin:0 auto;
    	border-radius:0;
    	border:2px solid #888;
    }
    
    #contactus form{
    	width:90%;
    	margin: 0 auto;
    }
    
    #contactus form label{
    	display: block;
    
    }
    
    #contactus form input, #contactus form textarea{
    	width: 100%;
    	padding:1em;
    	display: inline-block;
    }
    
    #msgbox{
    grid-template-columns: 2fr;
    display: grid;
    }
    
    #submit{
    	
    	margin: 0 auto;
    
    }
    
    .msglabel{
    	text-align: center;
    }
    
    
    #box {
        width: 50%;
        float:left;
    
    }
     
    
    input[type=submit]
    {
    	border-radius:5px;
    	background:#ba9743;
    	font-size: 10px;
    	grid-template-columns: 2fr;
    	display: grid;
     	-webkit-transition-duration: 0.4s; 
      	transition-duration: 0.4s;
      	text-transform: uppercase;
    
    }
    
    
    #submit:hover {
    	background-color: #997a00;
    }

  <div class="title">Contact Us!</div>
    				<form action="">
    
    					<div id="box">
    					<label for="fname">First Name</label>
    					<input type="text" id="fname" name="firstname" tabindex="1" placeholder="First name">
    					</div>
    
    					<div id="box">
    					<label for="email">Email</label>
    					<input type="text" id="email" name="emailaddress" tabindex="3" placeholder="Email address">
    					</div>
    
    					<div id="box">
    					<label for="lname">Last Name</label>
    					<input type="text" id="lname" name="lastname" tabindex="2" placeholder="Last name">
    				</div>
    					
    					<div id="box";
    					<label for="sub">Subject</label>
    					<input type="text" id="sub" name="subject" tabindex="4" placeholder="Subject">
    					</div>
    					
    			
    					<label for="msg" class="msglabel">Message</label>
    					
    
    					<textarea id="msgbox" name="message" tabindex="5" placeholder="Write something..." style="height:200px"></textarea>
    					<br>
    					
    					<input type="submit" value="Submit" id="submit">
    						
    				</form>