Align sub-labels in two-column payment field

I followed the guide from this link to divide products into : https://www.jotform.com/help/178-How-to-Have-Sub-Category-or-Sub-Labels-on-an-Order-Form 

The problem is when I made the payment field into two columns using CSS codes, the sub-headers also belonged in one column like other products and made the list confusing.

Is there a way to change the width of the sublabels to double the width of a column? Or maybe apply the code of shrinking the products into two columns EXCEPT for the sublabels - anything that works, please.

Please inject the following custom css code in your form and that should solve your problem:

#cid_23 > div > div > span:nth-child(31) {

    width: 100%;

}

#cid_23 > div > div > span:nth-child(59) {

    width: 100% !important;

}

label[for*="23_1015"], label[for*="23_1031"] {

    font-weight: bold;

    text-decoration: underline;

    pointer-events: none;

}

span#input_23_1015_price, span#input_23_1031_price {

    display: none !important;

}

input#input_23_1031, input#input_23_1015 {

    display: none;

}

The following guide should help you how to inject custom css code in form:   https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Hope this helps.

Do get back to us if you need any other changes.