How to format HTML with CSS for column layout - html

Question

I'm trying to do some simple HTML and CSS to get a page to layout something like the image below, but I'm way out of my element and not even sure how to get it started. Right now, my biggest problem is I can't get the Client Birth Date, and Spouse First Name to appear on its own line. I feel like I could add divs, but then I'd probably have divs everywhere (I'm assuming that's a bad thing.)
Here's a JSFiddle of what I have started.
<div>
<label for="WebName">Name</label>
<input type="text" id="WebName" />
</div>
<div>
<label for="WebEmail">Email</label>
<input type="text" id="WebEmail" />
</div>
<div>
<label for="WebPhone">Phone</label>
<input type="text" id="WebPhone" />
</div>
<hr />
<div style="border: 1px solid black; overflow: hidden;">
<!-- left -->
<div style="width: 500px; float:left; border: 1px solid red;">
<label for="ClientFirstName">Client First Name*</label>
<input type="text" id="ClientFirstName" />
<label for="ClientBirthDate">Client Birth Date</label>
<input type="text" id="ClientBirthDate" />
</div>
<!-- right -->
<div style="float:left; width: 500px; border: 1px solid green;">
<label for="ClientLastName">Client Last Name*</label>
<input type="text" id="ClientLastName" />
<label for="ClientAge">Client Age</label>
<input type="text" id="ClientAge" />
</div>
</div>
<hr />
<div>
<label for="AppointmentDate">Appointment Date</label>
<input type="text" id="AppointmentDate" />
<label for="Goals">Goals</label>
<textarea id="Goals" rows="4" cols="80">
</textarea>
</div>

Answer 1

I would add divs in those specific cases. Form elements can be messy when it comes to layout. I've found that wrapping a label + input inside a div is the best practice here. And since you've already done that in the first section you might as well follow the pattern.
<div class="inputWraper">
<label for="thisInputName">Some Text</label>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</div>
You could technically also wrap everything in the label instead of a div. This has some pros and cons mostly in that it makes everything clickable and adds focus. It's especially good for checkboxes and radio buttons as the hit area is bigger.
<label for="thisInputName">
<span>Your label text</span>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</label>