Custom CSS for multi-line Configurable List widget.

What is the CSS I can use to make the fields in configurable lists on form https://www.jotform.com/build/70105059161850 to appear on multiple lines, like so:

Hi,

I am currently creating the CSS for your form. Please give me some time and I will be back as soon as I have the custom CSS.

Please add the following custom CSS to the widget.

#list td {

    width: 25%;

}

td.col5 {

    position: absolute;

    top: 60px;

    left: 305px;

    width: 23% !important;

}

td.col6 {

    position: absolute;

    top: 60px;

    left: 457px;

    width: 23% !important;

}

#list input, #list select {

    width: 95%;

}

button.add {

    margin-top: 25px;

}

Please see instructions below on how to add the CSS.

The result on your end should be as follows.

Let us know if you need further assistance.

Regards.

Thank you for your help on this. After I added the CSS a weird message that I can't remove showed up under the widget:

Also, there is a second widget on the page that has a seventh column. I'd like to arrange it like the one above, but have that seventh column be on a third line below the others. Thank you!

There is a widget that was not used on the form near the bottom location. That was the one showing its configuration dialog.

You can safely delete that widget so that it will not show up on the live form.

Let us know if this did not resolve the issue.