How to make a Configurable List widget display in more than one row?

I set up a configuration widget, but all the columns do not fit.  It is running off the page and I can't find seem to change the font size on the columns either.

We can force Configurable List to display a line in two rows with a bit of custom CSS, though as it is a table element it requires custom coding for each column of the table.

I have checked your last edited form, and here is the custom CSS code for your exact configuration of the Configurable List widget that makes it display in multiple rows:

.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}

.col1 [type="text"] { width: 100px; }
th { display: none; }
td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7 {
display:inline-block;
float: left;
padding: 20px 5px 1px 1px;
width: 30%;
}

td.col1:before { content: "Name: "; }
td.col2:before { content: "Ethnicity: "; }
td.col3:before { content: "Gender: "; }
td.col4:before { content: "Date of Birth: "; }
td.col5:before { content: "Age: "; }
td.col6:before { content: "Disabled: "; }
td.col7:before { content: "Status: "; }
td.col7 { width: 60%; }

You can add the above CSS code to your Configurable List widget by clicking on its wand-shaped icon, switching to Custom CSS tab, and pasting the code there. Please take a look at the following image for visual guidance:

Here is a cloned version of your form with the change applied, so that you can see it in action:

https://form.jotformpro.com/form/60431802297958

The Configurable List has been moved to top of the form, for easier access to it. I have also noticed you had a line in your General configuration which shouldn't really be there "table {border-spacing: 5px !important;}". Please also try removing that line from under the General tab of your widget:

Let us know how it goes, or if you need further assistance, and we will be happy to help.