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

Here is how it is displaying now[![is displaying now](https://i.stack.imgur.com/6fuwP.png)](https://i.stack.imgur.com/6fuwP.png): 

Here is how I would like it to display [![with the panels named](https://i.stack.imgur.com/8SmvB.png)](https://i.stack.imgur.com/8SmvB.png)

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

Here is a link [to my website as an example](http://www.daintiercustomjewelry.com/mens-leather-wrap-around-bracelet-topaz-stone/) 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;
}

```