displaying div side by side

I am having some issues trying to display my <div checkoutoptionsto the right and my <div productdetailsto the left of checkoutoptions

Here is how it is displaying now:

Here is how I would like it to display

It looks like there is some kind of wrapping around the div checkoutoptionsthat won't let me move the div productdetails upbut I have not idea how to correct the issue.

Here is a link to my website as an example if you would like to see it first hand.

Here is my HTML:

    <!-- Share and title/show this panel on top -->


        <div class="ProductMain" style= "float: left; "> 
            <h1 itemprop="name">%%GLOBAL_ProductName%%</h1>

            %%GLOBAL_FacebookLikeButtonAbove%%
            %%GLOBAL_FacebookLikeButtonBelow%%
            %%GLOBAL_PinterestButton%%


            <!--side panel with add to cart show this panel to the right-->

            <div id="checkoutoptions">

               %%SNIPPET_ProductAddToCartRight%%
               <div><input id="ShopButton" style="display: none";></div>


               %%SNIPPET_ProductAddToCartBelow%%
               %%Panel.SideProductAddToWishList%%


                          <div class="WishlistRow DetailRow" style="display:%%GLOBAL_HideWishlist%%">
                              <a class="WishListButton" href="javascript: void(0)">ADD TO WISHLIST</a>

                </div>

                              %%GLOBAL_AddThisLink%%

            </div>


            <!--Yotpo Reviews/ display this panel next to checkoutoptions to the left and right under ProductMain-->

            <div id="productdetails">

<div style="padding: 0px 0px 0px; width: 200px; margin: auto; height: 00px"> </div><!--yotpo product rating-->

 <div class="yotpo bottomLine"
 data-product-id="%%GLOBAL_ProductId%%"
 data-url="%%GLOBAL_ProductLink%%">
    </div> 


            <div class="ProductDetailsGrid">
                <div class="DetailRow RetailPrice" style="display: %%GLOBAL_HideRRP%%">
                    <span class="Label">%%LNG_RRP%%:</span>
                    %%GLOBAL_RetailPrice%%
                    %%GLOBAL_YouSave%%
                </div>
</div>

Here is my CSS so far:

#checkoutoptions{
    margin:auto;
    padding: 10px;
    border-radius: 5px;
    width: 310px;
    border: 1px solid gray;
}

via Chebli Mohamed