How to make two vertical columns of fields?

Question

I added different part of codes and now I'm all confused on what to keep and what not not. I'm trying to have a contact form with 2 vertical columns. Can I get directions on what to add/keep and delete? (See the code below). Any help would be greatly appreciated.

<div class="clearfix">

<div class>

width:50%;
float:left;

[text* your-name placeholder "*Your full name"] <br/>

[email* your-email placeholder "*Your email"] <br/>
</div>

<div class>

    width:50%;
    float:right;

[tel* your-tel placeholder "*Your phone number"] <br/>

[text* your-zip placeholder "*Your zipcode"] <br/>
    </div>
</div>

<label> What school do you go to? </label><br>
[select* menu include_blank "Alabama School of Fine Arts" "Altamont" "Birmingham-Southern College" "Briarwood Christian School" "Enlightium Academy (Online School)" "Homewood High School" "Hoover High School" "Indian Springs School" "Islamic Academic of Alabama" "Jefferson State Community College" "John Carroll Catolic High School" "Mountain Brook High School" "Oak Mountain High School" "Spain Park High School" "UAB - University of Alabama in Birmingham" "Vestavia Hills High School" "Westminster School" "Other"] </br>

<label> What grade are you in? </label>
[select* menu-2 include_blank "5th grade" "6th grade" "7th grade" "8th grade" "9th grade (Freshman)" "10th grade (Sophomore)" "11th grade (Junior)" "12th grade (Senior)" "College" "Not at school" "Other"] </br>

<label> How can we help you? </label><br>
    [checkbox* checkbox "Conjugation" "Conversation" "Grammar" "Homeworks" "Learn the Basics" "Test Preparation" "Other"] </br>

[text your-message 20x20 placeholder "Additional Comments"]

<div class="row">
<center>[submit "Submit"]</center></div>

Answer 1

Do you want just the short input fields to be in columns and the long questions to run the width of the page? If yes, try this:

<div class="clearfix">

    <div style="float:left; width:50%;">
        [text* your-name placeholder "*Your full name"] <br/>

        [email* your-email placeholder "*Your email"] <br/>
    </div>

    <div style="float:right; width:50%;">
        [tel* your-tel placeholder "*Your phone number"] <br/>

        [text* your-zip placeholder "*Your zipcode"] <br/>
    </div>

    <div>

        <label> What school do you go to? </label><br>
        [select* menu include_blank "Alabama School of Fine Arts" "Altamont" "Birmingham-Southern College" "Briarwood Christian School" "Enlightium Academy (Online School)" "Homewood High School" "Hoover High School" "Indian Springs School" "Islamic Academic of Alabama" "Jefferson State Community College" "John Carroll Catolic High School" "Mountain Brook High School" "Oak Mountain High School" "Spain Park High School" "UAB - University of Alabama in Birmingham" "Vestavia Hills High School" "Westminster School" "Other"] </br>

        <label> What grade are you in? </label>
        [select* menu-2 include_blank "5th grade" "6th grade" "7th grade" "8th grade" "9th grade (Freshman)" "10th grade (Sophomore)" "11th grade (Junior)" "12th grade (Senior)" "College" "Not at school" "Other"] </br>

        <label> How can we help you? </label><br>
            [checkbox* checkbox "Conjugation" "Conversation" "Grammar" "Homeworks" "Learn the Basics" "Test Preparation" "Other"] </br>

        [text your-message 20x20 placeholder "Additional Comments"]

        <div class="row">
            <center>[submit "Submit"]</center>
        </div>

    </div>

</div>