Product Columns not showing in preview

Hi! I'm using the CSS code below to split my products into two columns, and it works great in the building stage but when I preview it, the products are still displayed one below the other, in one column. Any way to fix this? Thank you!

/*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*/

I've checked your form and i see a property written wrong. 

when i change the float property to left the products will be visible in two columns as seen below i have also added height: 100px to ensure all products are same.

 Thank you! This is great. I just cant set up the height to be 100px because it will cut off the "mixed fresh green garland" option and customers wont be able to order. But if I leave the the height unspecified, the form looks great as I am building, exactly as above, but when I click on preview, for some reason, one of the items of the left column moves to the right column...

Hi,

You can add height:120 px; to your css under .form-product-item.

Here is a screen shot.

I hope this information helps you.

Best Regards.