How can I change the width of my configurable list?

Hi! Before I asked my question, I have spent sometime looking for previous questions/answers - however, a) it didn't really answer my question b) I still didn't know how to enter the codes (even when I just copied the codes you all provided). 

I'm hoping you can help me with my specific table. Full disclosure, I honestly, don't know a lot about coding.

I created a configurable list, however, in my form it runs off. Can you please advise how I can make this look presentable in a form?

If it's easier, the fields don't have to all be on a single line. Please just let me know how to change that too.

Thank you,
Joy

Hi,

I am currently checking your form. Please allow me sometime to further check. I will get back soon as I found a custom CSS to provide in the Configurable List Widget.

Regards

Hi,

Can you please try to inject this custom CSS below?

input[type=text] {

    width: 70px  !important;

}

select {

width: 100px  !important;

padding: 0px  !important;

margin: 0px  !important;

}

 

select.m {

width: 70px  !important;

}

 

select.d {

width: 40px  !important;

}

select.y {

width: 50px  !important;

}

 

li#id_15 {

    padding-left: 30px  !important;

}

th {

font-size: 10px !important;

font-weight: normal !important;

}

 

 

.col8 {

    position: absolute;

    left: 0;

    margin-top: 80px;

}

#list tr:nth-child(2) input, #list tr:nth-child(2) > td > select {

    margin-top: 10px !important;

}

#list tr input, #list tr > td > select {

    margin-top: 50px !important;

}

#list tr:first-child > .col8 {

    display: none;

}

#list tr:nth-child(2) > .col8 {

    margin-top: 40px;

}

#list tr > .col8:before {

    content: "When did it start";

}

.add {

margin-top: 60px;

}

 

 To inject custom CSS in the Configurable List Widget please see the screenshot below:

 

Let us know if this works.
Regards