Structuring an HTML form into two sections

Question

I have a form that is divided into two sections both sitting next to each other. I am not sure how to go about this as I have read that some people use tables and others use lists? I am new to html and CSS but I would just put the two sections in divs and float one to the left. I read however that this is not a good method as divs are supposed to define two different things?

I have read a lot of questions and blogs about this but it's making me slightly more confused.I am just wanting to know the best way to go about this for this particular form.

Here is the code:

http://jsfiddle.net/EdZ32/

<div class="bookingForm">
    <form action="">
        <label for="flightType">
            Please select your flight<br>
            <select name="type" id="flightType">
            <option value="Fixed Wing">Fixed Wing</option>
            <option value="Helicopter">Helicopter</option>
            <option value="Glider Flights">Glider Flights</option>
            </select> <br>
        </label>
        <label for="numberPassengers">
            Number of Passengers<br>
            <select name="type">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            </select><br>
        </label>
        <label for="startDate">
            Start date <input type="date" name="startDate"><br>
        </label>
        <label for="departureTime">
            Departure itme <input type="date" name="departureTime"><br>
        </label>
    <!--SECTION TWO -->
        <label for="name">
            Full Name* <input type="text" name="name"><br>
        </label>
        <label for="email">
            Email* <input type="text" name="email"><br>
        </label>
        <label for="phoneNumber">
            Phone Number* <input type="number" name="phoneNumber"><br>
        </label>
        <label for="postalAddress">
            Postal Address <input type="text" name="postalAddress"><br>
        </label>
        <label for="city">
            City <input type="text" name="city"><br>
        </label>
        <label for="additionalInfo">
        Additional Information<br>
        <textarea rows="10" cols="30" name="comment" form="usrform">
                    Enter    text here...</textarea>
    </label>

    </form>

Answer 1

I would just use two different divs for this:

HTML

<div class="left">
<!-- Second Section Here-->
</div>

CSS

.bookingForm {width:600px;} /* Choose your custom width or no width at all */
.bookingForm .left {float:left;width:49%;}
.bookingForm .right {float:right;width:49%;}

Also, your Labels should not wrap all the imput elements but just the text like this:

<label for="additionalInfo">
   Additional Information
</label>

I have updated your code on JSfiddle here:

http://jsfiddle.net/EdZ32/4/

Answer 2

i have edited your code and i hope this helps you

you must specify 2 division for each set of inputs you have. then put CSS to float them right to each other

<div id="sec1"></div>
<div id="sec2"></div>

Above was added to your code and a CSS for float.

JSFIDDLE