How to position fields of Configurable List on 2 lines with custom CSS code?

A while back I asked for some help with the configurable lists on this form: https://form.jotform.co/70105059161850. I was provided CSS code to have columns 4 and 6 on a second line. It looks great, but it only works for the first item. Is there a fix for the code that will make it work correctly?

Hello,

I am checking options to fix the code. I will be back with an update soon.

Thank you.

Hello,

Please remove all the existing CSS codes injected into the widgets and use the following respectively.

For the first configurable list, inject this in it's CSS section:

.remove {padding: 2px 8px !important;}

.col7 {position: relative;left: -420px;}

#list > tbody > tr:nth-child(1) > th.col4 {    display: none;}

tr {    height: 60px;}

td.col4 {    position: relative;    top: 30px;    left: -208px;}

td.col5 {    position: relative;    left: -210px;}

td.col6 {    position: relative;    top: 30px;    left: -418px;}

select {    width: 200px !important;}

input {    width: 196px !important;}

button.add {    margin-top: 65px;}

For the second config list, use this:

.remove {padding: 2px 8px !important;zoom: 0.8;}

.col8 {position: relative;left: -335px;}

#list > tbody > tr:nth-child(1) > th.col4, #list > tbody > tr:nth-child(1) > th.col6 {    display: none;}

tr {    height: 60px;}

td.col4 {    position: relative;    top: 30px;    left: -168px;}

td.col5 {    position: relative;    left: -166px;}

td.col6 {    position: relative;    top: 30px;    left: -334px;}

td.col7 {    position: relative;    left: -330px;}

select {    width: 160px !important;}

input {    width: 156px !important;}

button.add {    margin-top: 65px;}

Related guide: How-to-Inject-CSS-Codes-to-Widgets

Let us know if there is anything else we could assist with.

Thank you.

Thank you for your help!

Hello,

I discovered an issue with the fields after adding the above CSS. For the first item everything works fine, but when rows are added, the drop-down on column 3 (what is the relationship) in subsequent rows isn't clickable. It's still possible to tab to the field and use the arrow keys to choose an answer, but clicking the drop-down doesn't activate it.

The issue is consistent across browsers.

Hello,

I have added the following code into your widgets for your convenience:

Please check if the issue is resolved now. 

We will gladly assist if you need more help.

Thank you.