Confirubale List: How to make fields appear spread out in several rows

I wanted to have the questions in 4 rows   and have injected the .css from the forum group.

My plans was to have :

Row 1: Project Name

Row 2: Description

Row 3: Key Acomplishments, Key Challenges

Row 4:  Key learnings , Future plans

Unfortunately it doesn't work.

Please help .

Thanks

I see that the CSS code you were using is this:

.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}
th { display: none;}
#list {
counter-reset: counter -1;
}

#list tr:after {
content: counter(counter);
counter-increment: counter;
display: inline-block;
width: 10px;
font-size: 18px;
margin-right: 5px;
margin-left: 5px;
text-align: right;
color: #FF8112
}

td.col1, td.col2, td.col3, td.col4, td.col5,td.col6,td.col7{
    display: inline-block;
    width: 350px;
    float: left;
}
.col1 textarea {width:500px;resize:vertical; height: 50px}
.col2 textarea {width:500px;resize:vertical;height: 100px}
.col3 textarea {width:500px;resize:vertical;height: 100px}
.col4 textarea {width:500px;resize:vertical;height: 100px}
.col5 textarea {width:500px;resize:vertical; height: 100px}
.col6 textarea {width:500px;resize:vertical;height: 100px}
.col7 textarea {width:500px;resize:vertical;height: 100px}

input[type="text"], select, .stepper-wrap input.stepper { width: 90%; }

td.col1:before {   clear: left;content: "Project";width:250px;}
td.col2:before { clear: left;content: "Description";width: 250px; }
td.col3:before {  clear: left;content: "Key Achievement"; width:250px; height:250px}
td.col4:before {clear: left;content: "Key Challenges"; width: 250px;}
td.col5:before { clear: left;content: "Key Learnings"; width: 250px;}
td.col6:before { clear: left;content: "Future Plans";width: 250px; }
td.col7:before { clear: left;content: "Future improvements"; width: 250px;}


/* Positioning the fields in multiple columns*/
#list tr td {
    padding-top: 5px;
}
#list tr:nth-child(odd) {
    background-color: lightblue;
}
#list tr:nth-child(even) {
    background-color: lightyellow;
}

Please try using the following full custom CSS instead:

.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}
th { display: none;}
#list { counter-reset: counter -1; }
#list tr:after {
content: counter(counter);
counter-increment: counter;
display: inline-block;
width: 10px;
font-size: 18px;
margin-right: 5px;
margin-left: 5px;
text-align: right;
color: #FF8112
}

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 {
    display: inline-block;
    width: 99%;
    float: left;
    margin: 0;
    padding: 5px 0 0 1%;
}
td.col3, td.col4, td.col5, td.col6 { width: 48%; }
td.col3, td.col5 { margin-right: 2%; }

textarea { resize:vertical; width: 100%; height: 100px; }
.col1 textarea { height: 50px; }

input[type="text"], select, .stepper-wrap input.stepper { width: 90%; }

td.col1:before { clear: left; content: "Project"; }
td.col2:before { clear: left; content: "Description"; }
td.col3:before { clear: left; content: "Key Achievement"; }
td.col4:before { clear: left; content: "Key Challenges"; }
td.col5:before { clear: left; content: "Key Learnings"; }
td.col6:before { clear: left; content: "Future Plans"; }
td.col7:before { clear: left; content: "Future improvements"; }

/* Positioning the fields in multiple columns*/
#list tr td {
    padding-top: 5px;
}
#list tr:nth-child(odd) {
    background-color: lightblue;
}
#list tr:nth-child(even) {
    background-color: lightyellow;
}

Your Configurable List will end up looking like this, which is what I believe you were trying to achieve:

Please try it out, and let us know should you need further assistance.