Is there a way to implement a three-column HTML form layout according to the design depicted in the linked image?
https://i.sstatic.net/XJQzJ.png
Shown above is the sample HTML code for the template. What I am looking for is the proper CSS styling to achieve a consistent look and feel.
<form method="post" name="Form1" action="" onSubmit="return validateForm();" onchange="showForm();" id="form3118" >
<div class="webform-component first-name" >
<label for="field0" >
First Name*
</label>
<input id="field0" name="firstName" type="text" value="" />
</p>
</div>
<div class="webform-component last-name" >
<label for="field1">
Last Name*
</label>
<input id="field1" name="lastName" type="text" value="" />
</p>
</div>
<div class="webform-component school" >
<label for="field2">
School*
</label>
<input id="field2" name="schoolName" type="text" value="" />
</div>
<div class="webform-component role" >
<label for="field3">
Role*
</label>
<select id="field3" name="role">
<option value="" selected="selected" >
Please select
</option>
<option value="Principal" >
Principal
</option>
<option value="Assistant/Vice Principal" >
Assistant/Vice Principal
</option>
<option value="Curriculum Coordinator" >
Curriculum Coordinator
</option>
<option value="eLearning Coordinator" >
eLearning Coordinator
</option>
<option value="Head of Department" >
Head of Department
</option>
<option value="Teacher" >
Teacher
</option>
<option value="Other school staff member" >
Other school staff member
</option>
<option value="None of the above" >
None of the above
</option>
</select>
</div>
<div class="webform-component email-address" >
<label for="field5" >
Email Address*
</label>
<input id="field5" name="emailAddress" type="text" value="" />
</div>
<div class="webform-component last-name" >
<label for="field15">
Mobile/Phone number*
</label>
<input id="field15" name="mobile" type="text" value="" />
</p>
</div>
<div class="webform-component--resource-format" >
<label for="field13" >
In what format do you prescribe resources?
</label>
<select id="field13" name="resourceFormat" >
<option value="" selected="selected" >
Please select...
</option>
<option value="Digital only" >
Digital only
</option>
<option value="Digital with some print" >
Digital with some print
</option>
<option value="Equal digital and print" >
Equal digital and print
</option>
<option value="Print with some digital" >
Print with some digital
</option>
<option value="Print only" >
Print only
</option>
</select>
</div>
<input type="submit" value="Submit" />
</form>
While it's easier to use CSS flex/grid or Bootstrap for this layout, the preference is to use pure CSS for universal browser compatibility without encountering any rendering issues.