How can I make my products align beside each other in Purchase order?

I made a products purchase form but the list is too long. is there any possible way to make the product boxes align beside each other than under each other? I greatly appreciate it :)

Thank you & I'll be waiting for your reply.

 

MJ

Hi,

You can try achieving this by using this custom CSS code: 

/*Start: CSS to make 2 column payment field*/

.form-product-item {

    border : 1px solid #EFEFEF;

    margin : 1px;

    float : center;

    width : 293px;

    vertical-align : top;

    padding-bottom: 20px !important;

}

.form-product-item + br {

    display : none;

}

br + b {

    float : right;

    padding-top : 20px;

}

.form-payment-total {

    line-height : 50px;

    margin : 1px;

    border : 0px solid #EFEFEF;

    border-radius : 4px;

    padding : 15px;

    padding-right : 193px;

    padding-left : 6px;

    direction: rtl;

}

.form-product-item > div {

    float: right !important;

}

.form-product-child-table {

    margin-top: 15px !important;

}

/*End*/

 

You can insert it to your form by following this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. You can see how the form looks like on this cloned form that I have: https://form.jotformpro.com/71170579014958. 

Let us know if that works. 

Thank you so much for your help.. It's totally Great ^_^
...