Configurable List Widget - How to format the columns to rows and keep the width of the labels and text input consistent?

Please see the following screen shot. 

The comma you pointed in your screenshot makes the codes not valid. It may look that it fixed the format of the fields in the Configurable List widget, but the codes can really be removed.

You should get the same correct result if you will delete the codes below.

.col3 input[type="text"], .col4 input[type="text"], .col5 input[type="text"],{

    display: block;

    width: 15%;

font-family: arial;

font-size:14px;

color: #494949;

}

As for fixing the Comment box, please remove the entire CSS codes in the custom CSS tab of the widget and replace it with the codes below.

/*Format for the Configurable List Widget into rows*/

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

#list {width: 100%; border-collapse: collapse;} 

#list tbody:first-child > tr > td{display:block; padding: 6px 0;} 

#list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} 

#list > tbody:first-child tr td.col1 {padding-top: 20px;} 

.mobileColumnName {display: inline-block; padding-bottom: 4px; width: 50%; box-sizing: border-box;font-size: 12pt;} 

.mobileColumnName + input, 

.mobileColumnName + textarea, 

.mobileColumnName + select, 

.mobileColumnName + .radio-container, 

.mobileColumnName + .checkbox-container, 

.mobileColumnName + .dateContainer {width: 50%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} 

.buttonsColumn {text-align: right;} 

/*Format for the 'Add a Surface' button*/

.add, .remove {

background: #2eb82e !important;

width: 145px;

height: 35px;

font-size: 17px;

font: Arial !important;

font-weight: 700;

text-shadow: none !important;

color: #ffffff !important;

cursor: pointer;

display: block;

position: relative;

-webkit-box-shadow: 0 -10px 29px 0 rgba(0, 0, 0, 0.25);

-moz-box-shadow: 0 -10px 29px 0 rgba(0, 0, 0, 0.25);

    box-shadow: 2px 2px #2eb82e;

    border: 1px solid #fffbea;

    border-radius: 5px;

    transition-property: background-color;

    transition-duration: 1s;

}

After that, make the width of the widget 618px from its properties.

Here's a clone version of your form where I have applied the changes above — https://form.jotform.com/82336880023959

I hope this helps. If you have other questions or concerns, please feel free to let us know.

This is awesome! Even the text looks like the rest of the form (which I didn't mention). Thank you Mike G.!

You are most welcome! I'm glad that I was able to help. Feel free to contact us anytime should you have other questions or concerns.