Configurable List Widget: display vertically

I am using the Configurable List Widget as it allows me to have several input types.  On my form I need to have name on one row and the choices (dropdown boxes) be on the second row so everything fits.  I have tried to copy and paste and update the CSS code from other examples and it isn't working for me.  Can you please update the CSS so that it puts the medication choices on a second row?

 

 

I created a demo here:

https://form.jotformpro.com/72335338204956

 

For the configurable list widget to appear vertically.

Here's the field configuration:

: static : First Name
: text
: static : Last Name
: text :
: static : Grade
: number :
: static : Health Card
: text :

 

And here's the CSS:

.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}
input[type=text] {
height: 25px;
}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8
{
display: block !important;
width: 100px;
}
.col8{
margin-bottom: 50px !important;
}

And for the second configurable widget (medication) to appear vertically as well.

 

Field configuration:

: static : Child's Name
: text :
: static : Upset Stomach (Gravol/Tums)
: dropdown : No, Yes: Please Select
: static : Allergies (Benadryl/Reactine)
: dropdown : No, Yes: Please Select
: static : Cold/Sore Throat (Cough Syrup
: dropdown : No, Yes: Please Select
: static : Upset Stomach (Gravol/Tums)
: dropdown : No, Yes: Please Select

 

Custom CSS:

.checkbox, .radio {
margin: 3px 0;
min-width: 10px;
}
input[type=text] {
height: 25px;
}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10{
display: block !important;
}
.col10{
margin-bottom: 50px !important;
}

Thanks that works well.  Is it possible to have all four choices appear on the second row to save space?  If they don't fit could you make it so there are two choices per row?

Is there a way to set up a condition that pre populates this from the "First Name" on the top of the form so that when the user gets to the medication section the names of all registrants are already there?

Finally there is a large gap between "Child's Name" and the header.  Any way to reduce that?

 

Thanks so much for your quick response.

I have revised the demo:

https://form.jotformpro.com/72335338204956

 

Fields Configuration:

Child's Name: text :
Upset Stomach (Gravol/Tums) : dropdown : No, Yes: Please Select
Allergies (Benadryl/Reactine) : dropdown : No, Yes: Please Select
Cold/Sore Throat (Cough Syrup) :dropdown : No, Yes: Please Select
Upset Stomach (Gravol/Tums): dropdown : No, Yes: Please Select

Custom CSS:

body{
height: 500px;
}

.checkbox, .radio {
margin: 3px 0;
min-width: 10px;
}
input[type=text] {
height: 25px;
}
th{
width: 50px;
}
.col1{
position: relative;
top: 60px;
margin-top: 100px;
}
.col2, .col3, .col4, .col5{
position: relative;
left: -125px;
}

button{
position: relative;
left: 350px;
margin-bottom: 100px;
}

 

 

So close in getting this right.  I actually wanted to have the name still appear on the top with the options below.  I was able to switch that myself.  Is there a way to put a bit more spacing between the options as they are a bit tight right now.  Also there is alot of space on the bottom of that field can you remove that empty space?  Finally the "x" to remove a "child" floats over the background making it hard to see.  Can that also be moved so that it is on the actual form like the rest of the options. 

 

Here is the current form with the name back on top:

https://www.jotform.com/build/72325663142250

 

Thanks again for all your help with this.

 

I found it hard to troubleshoot the current design implemented through the CSS injection. However, I have created another code to put all fields vertically, you may consider this other alternative:

th {

    display: none;

}

td{

    display: block;

    position: relative;

    margin-left: 0px;

    width: 200px;

}

td.col4{

width: 220px;

}

td.col1:before {

content: "Child's Name";

font-weight: bold;

}

td.col2:before {

content: "Upset Stomach (Gravol/Tums)";

font-weight: bold;

}

td.col3:before {

content: "Allergies (Benadryl/Reactine)";

font-weight: bold;

}

td.col4:before {

content: "Gold/Sore Throat (Cough Syrup)";

font-weight: bold;

}

td.col5:before {

content: "Upset Stomach (Gravol/Tums)";

font-weight: bold;

}

td{

margin-top: 10px !important;

margin-bottom: 10px  !important;

}

td.col6:after {

    content: "----------------------------------------";

    float: left;

}

Result: https://form.jotformpro.com/72336994080967?jumpToPage=2 

You may clone my form if you want to: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

URL to my form: https://form.jotformpro.com/72336994080967