I need to divide the Configurable List widget and show tem into 2 rows

The configurable list I've used in my form contains 9 columns. It is not possible to show all the columns in one row as it goes out of the width of the form. I need to divide them and show them into 2 rows. I have tried some CSS but unable to achieve desired result.

Can you please help fixing it?

Please remove the CSS that you injected inside the Configurable List widget and replace it with the CSS code below:

#list > tbody > tr:first-child {
display: none;
}

.mobileColumnName {
display: block;
}

td.col6 {
clear: left;
}

td {
float: left;
font-weight: 700; 
padding-bottom: 10px;
color: #ffffff;
}

Here's a guide on How-to-Inject-CSS-Codes-to-Widgets. Here's the result:

Hope that helps. If you have any questions, let us know.

It worked. Thank you so much!