Customizing form field layout and equal widths for desktop only

Site URL: https://theharper.squarespace.com/

Hi! 

PW: theharpernyc

I'm trying to using custom css to customize the form field. 

I managed to get the the form fields to be where I want it by using this code:

For email & phone number:
div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(2), .form-wrapper .field-list>div:nth-child(3) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(2) {margin-right:2%;}}

For unit & budget:
div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(3), .form-wrapper .field-list>div:nth-child(4) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(3) {margin-right:2%;}}

For broker info:
div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(5), .form-wrapper .field-list>div:nth-child(6) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(5) {margin-right:2%;}}

And this is the result:

However I am having a hard time trying to get each filed box to be the equal width & spacing like this:
Ideally all the field would be equal width and height.

Also, how what kind of code would I need to make this layout to be visible on on desktop?

Thanks in advance!