CSS code for configurable list

How can I move each item in my configurable list to a different line?  

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

I would like to have child's name, child's date of birth, and allergies each on a new line. 

Please add this CSS code into your Configurable List " CUSTOM CSS"

.checkbox, .radio {

margin: 3px 0;

min-width: 70px;

}

tr {

     height: 270px!important;

}

#list > tbody > tr:first-child {

    display: none;

}

td.col1:before {

     content: "Child's Name";

     display: block;

font-weight: bold;

}

td.col2:before {

     content: "Child's Date of Birth";

     display: block;

}

td.col3:before {

     content: "Allergies ";

display: block;

}

.col2 {

float: left!important; 

    top: 70px!important;

    left:-125px!important;

position: relative;

font-weight: bold;

}

.col3 {

display:block;

   left: -330px!important;

float: left;

    top:140px!important;

position: relative;

font-weight: bold;

}

Thank you!

The only problem I'm having now is that I cannot see the allergies field at all.  Name and child's date of birth are showing up, however, users cannot see allergies or the textbox to type in.

https://form.jotform.com/73387065884167

I have checked your form and I can see the Allergies label and the textbox clearly.

You can adjust the label a little by using  my colleagues code and changing the left:330px !important to left:320px!important;