In SS Forms, how to have 2 drop down select fields in 1 row

Site URL: https://heartworksvt.com/contact-us

Using Squarespace form. I’ve identified the issue to be the custom code I injected into the page header, specifically the “float: left” on the .form-item.field.select.  Code below. The intention with this code was to have the 2 drop down menus on 1 row.  If I remove the code, all the fields would just be stacked on 1 column.  With the “float: left” on the .form-item.field.select., the fields appear OK on 1 row, however, when i click to expand, the drop down menu doesn't appear, nothing happens.  Video attached.  For now, I have removed that bit for the form to function.  Please advise on a workaround? 

<style>

@media screen and (min-width:901px) {

.form-item.field.email {

    width: 49%;

               float:left;

}

.form-item.field.select {

  width: 50%;

  float: left;

}

}

</style>

Looks like you got this figured out?