4 Column in Contact Form 7, the 2nd row out of positions

Question

Here's the CSS and html in Contact Form 7, I'm new to css, what do I need to do so the 2nd row isn't out of order please?

'Contact Number' supposed to be the first item on the 2nd row, not sure how it ends up being there.

Outcome

.one-half,
.one-third,
.one-fourth {
    position: relative;
    margin-right: 4%;
    float: left;
        margin-bottom: 20px;
 
}
 
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.one-fourth { width: 22%; }
 
.last {
    margin-right: 0 !important;
    clear: right;
}
 
@media only screen and (max-width: 767px) {
    .one-half, .one-third, .one-fourth {
        width: 100%;
        margin-right: 0;
    }
}

<div class="one-fourth">
[select* ppl "1 Person" "2 Persons" "3 Persons" "4 Persons" "5 Persons" "6 Persons" "7 Persons" "8 Persons" "9 Persons" "10 Persons" "11 Persons" "12 Persons" "13 Persons" "14 Persons" "15 Persons" "16 Persons" "17 Persons" "18 Persons" "19 Persons" "20 Persons" "21 Persons" "22 Persons" "23 Persons" "24 Persons" "25 Persons" "26 Persons" "27 Persons" "28 Persons" "29 Persons" "30 Persons" "31 Persons" "32 Persons" "33 Persons" "34 Persons" "35 Persons" "36 Persons" "37 Persons" "38 Persons" "39 Persons" "40 Persons"]
</div>
 
<div class="one-fourth">
[date* r-date date-format:mm/dd/yy min:today+2days]
</div>

<div class="one-fourth">
[select* r-time "8:00pm" "8:30pm" "9:00pm" "9:30pm" "10:00pm" "10:30pm" "11:00pm" "11:30pm" "12:00am" "12:30am" "01:00am"]
</div>

<div class="one-fourth last">
[text* r-name placeholder "Contact Person's Name"]
</div>
 
<div class="one-fourth">
[tel* r-mob placeholder "Contact Number"]
</div>

<div class="one-fourth">
[email* r-email placeholder "Email Address"]
</div>

<div class="one-fourth">
[select* r-method "Preferred Contact Method" "Phone" "Email"]
</div>

<div class="one-fourth last">
[submit "Book a room"]</div>

enter code here

Answer 1

You can just use flexbox for the wrapper and that would make the rows even height, rather than using floats.

.flex-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.one-half, .one-third, .one-fourth {
    margin-bottom: 20px;
}
.one-half {
    width: 48%;
}
.one-third {
    width: 30.66%;
}
.one-fourth {
    width: 22%;
}

<div class="flex-wrapper">
  <div class="one-fourth"> [select* ppl "1 Person" "2 Persons" "3 Persons" "4 Persons" "5 Persons" "6 Persons" "7 Persons" "8 Persons" "9 Persons" "10 Persons" "11 Persons" "12 Persons" "13 Persons" "14 Persons" "15 Persons" "16 Persons" "17 Persons" "18 Persons" "19 Persons" "20 Persons" "21 Persons" "22 Persons" "23 Persons" "24 Persons" "25 Persons" "26 Persons" "27 Persons" "28 Persons" "29 Persons" "30 Persons" "31 Persons" "32 Persons" "33 Persons" "34 Persons" "35 Persons" "36 Persons" "37 Persons" "38 Persons" "39 Persons" "40 Persons"] </div>
  <div class="one-fourth"> [date* r-date date-format:mm/dd/yy min:today+2days] </div>
  <div class="one-fourth"> [select* r-time "8:00pm" "8:30pm" "9:00pm" "9:30pm" "10:00pm" "10:30pm" "11:00pm" "11:30pm" "12:00am" "12:30am" "01:00am"] </div>
  <div class="one-fourth"> [text* r-name placeholder "Contact Person's Name"] </div>
  <div class="one-fourth"> [tel* r-mob placeholder "Contact Number"] </div>
  <div class="one-fourth"> [email* r-email placeholder "Email Address"] </div>
  <div class="one-fourth"> [select* r-method "Preferred Contact Method" "Phone" "Email"] </div>
  <div class="one-fourth"> [submit "Book a room"]</div>
</div>