I've created a form with the first name and last name fields displayed horizontally next to each other, as shown in the image. When a user clicks on a field, it should change color (still pending coding).
However, there seems to be an unwanted gap between the First Name field and the Last Name field in the layout presented in the image. I'm struggling to identify the source of this issue.
How can I eliminate this gap so that the fields take up all available space?
https://i.sstatic.net/GdmUK.png
The HTML:
<div class="topBox">
<div class="closeModal">X</div>
<div class="clear"></div>
<div><img src="images/ProvenWordLogoSmall.png" alt="ProvenWord Logo"></div>
</div>
<div class="bottomBox">
<h3>Free Quote Form</h3>
<form class="freeQuoteForm">
<div class="nameFields">
<input type="text" id="firstName" placeholder="First Name" required>
<input type="text" id="lastName" placeholder="Last Name" required>
</div>
<div class="nameFields">
<input type="email" id="email" placeholder="Email Address" required>
</div>
</form>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
The CSS:
.topBox {
width: 640px;
margin: 0 auto;
}
.bottomBox {
background: white;
margin: 30px auto;
width: 640px;
height: 595px;
border: 1px solid #9c9c9c;;
}
.bottomBox h3 {
text-align: center;
padding: 20px 0;
}
.freeQuoteForm {
width: 530px;
height: 430px;
border: 1px solid #9c9c9c;
text-align: left;
}
input, textarea {
font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
font-size: 12px;
font-weight: 100;
border: none;
}
input[type="text"], input[type="email"] {
display: inline-block;
width: 262px;
height: 60px;
padding: 0px;
}
input[type="email"] {
width: 518px;
}
#lastName {
border-left: 1px solid #9c9c9c;
}
.nameFields {
border-bottom: 1px solid #9c9c9c;
}