Help with the CSS in my Configurable List widget

Hi!

I'd like to ask help in setting up my Configurable list to make it look neater. I tried looking around in the forums on how to put some fields in another row and I succeeded (somewhat) but it looks aweful!

My form is here: https://form.jotform.me/82162589102455

My code is:

.checkbox, .radio {

margin: 3px 0;

min-width: 70px;

}

.d {

display:none;

}

.col1 [type="dropdown"] {

    width: 225px;

}

tr {

    display: block;

}

td.col4 {

    display: block;

    position: relative;

    top: 20px !important;

}

td.col5 {

    display: block;

    position: relative;

    top: -18x !important;

    left: 130px !important;

}

td.col6 {

    display: block;

    position: relative;

    top: -56px !important;

    left: 307px !important;

}

tr {

display: block;

}

td.col7 {

    display: block;

    position: relative;

    top: -20px !important;

}

th {

    display: none;

}

td.col1:before {

    content:"Relationship to you";

}

td.col2:before {

    content:"Surname, Given Name";

}

td.col3:before {

    content:"Birth date";

}

td.col4:before {

    content:"Relationship Status";

    display: block;

}

td.col5:before {

content:"Year Citizenship granted";

display: block;

}

td.col6:before {

content:"Country of Citizenship";

display: block;

}

td.col7:before {

content:"Australian immigration status";

display: block;

}

Here's a more cleaner version of that:

#list > tbody > tr:first-child { display: none; }

.mobileColumnName { display: block; }

td { float: left; }

To move columns to a new line, use this:

td.col4, td.col7 { clear: left; } This will move "Relationship Status" 2nd row and "Australian immigration status" to 3rd row.