How to line up Prices and Names into Columns in the Payment Tool

I have asked this before, but so far there has not been anyone who has a way to accomplish this.  Posting again in hopes that there is an answer now. :)

I have a form with a payment tool.  I would like the columns of the payment tool to line up (see screenshot).  Right now, the only way that I have been told to accomplish this is to put a bunch of .......'s after the product name to push the price out enough on each one.  This really messes with my CRM.  I need a way to do this without the ......'s.  

Thanks in advance for your help!

PS - I don't need the red lines... they are just visual examples of where I need the columns to be.  

I am currently looking into a custom CSS way. I will get back to you via this thread.

I am sorry for the delay. You can remove the dots, and add the following CSS to your custom styles:

.form-product-details {
float: right;
margin-right: 300px;
}
.form-sub-label-container {
position: relative;
top: -20px;
}
.form-sub-label-container label {
display: none;
}

I think that might just work!  Although 1 thing did mess up..... looks like one of my prices .... Accu-Chek Multiclix Lancets is not lining up.  Any ideas on how to fix that?  Thanks!

Looks like it also messed up my text where it asks for name and address.  Hope you can help! :)

Although 1 thing did mess up..... looks like one of my prices .... Accu-Chek Multiclix Lancets is not lining up.

Please remove the following CSS to fix this:

label[for="input_1_1053"]{width: auto !important;display: inline-block;vertical-align: middle;}

Looks like it also messed up my text where it asks for name and address. 

It can be done with the following CSS:

.form-product-details {
float: right;
margin-right: 300px;
}
.form-product-item .form-sub-label-container {
position: relative;
top: -20px;
}
.form-product-item .form-sub-label-container label {
display: none;
}

Added .form-product-item to the current CSS.

Thank you.

The second part (where the address and name messed up) worked fantastically!

The first part, where I was to delete the part of the code didn't work how I needed it to.  I would like for the prices to all line up as they currently are.  There is just one that isn't lining up.... AccuChek Multiclix lancets... the $2 price isn't lining up like the other prices are.  I need it to line up just like the other product prices are.  (Hope I am explaining that well enough).

Thanks so much for all of your help!!!

Hello churchsaver,

Please take a look at the following cloned form and see if this meets you expectation in terms of the alignment of product prices: http://form.jotformpro.com/form/41992133086962?

If the cloned form looks good, please replace your existing css code of your form with the following custom css code where I have removed the code which was causing the alignment issue:

.form-product-item {width: 700px !important;}.form-product-item br {display: none;}.form-product-item .form-sub-label-container {width: 275px !important;float: right;}input[name*="q1_tellUs1[special"] {float: left;}label[for="input_1_1053"]{width: auto !important;vertical-align: middle;}

.form-product-item .form-checkbox {display: none;} .form-all {

background: url("http://cashforteststrips.com/wp-content/uploads/2014/06/boxquote4.png") repeat-y; center;

min-height: 410px !important;

overflow: visible !important;

}

.form-section{margin-left:50px !important;}

span.form-product-details {font-size: 11px;color: #000000;}

.form-product-details {

float: right;

margin-right: 300px;

}

.form-product-item .form-sub-label-container {

position: relative;

top: -20px;

}

.form-product-item .form-sub-label-container label {

display: none;

}

You can also copy the custom css code from the following URL:  http://pastie.org/pastes/9404777/text

The following guide should help you in injecting the custom css code in your form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes