Ensure that the product detail page features a row with labels and buttons, positioned to the right of the image within Bootstrap columns.
I have utilized Bootstrap 3 for this page layout. However, upon implementation, I encountered an issue whereby the button row appeared at the bottom and the table started below it.
<div class="maincontent">
<!-- Image on left side -->
<div class="details-gallery hidden-xs">
<a class="bigimg fbox">
<img alt="" id="detail-mainimage" />
</a>
</div>
<div class='inline-block'>
<!-- Row containing labels and buttons -->
<form>
<label for="spinner">
quantity
</label>
<input id="spinner" class='amount '/>
<label for='total_eur'>Sum</label>
<span class='maincontent-paymentsum' id="total_eur"></span>
<input type="submit" value="Add to cart" class="btn btn-success" />
<input type="button" class="btn btn-primary " onclick="javascript: history.back(1)"
value='Back' />
</form>
</div>
...
<!-- Table intended to be displayed to the right of the image -->
<table class="table table-hover table-condensed table-responsive inline-block">
How can I resolve this issue so that the content properly aligns to the right of the image?
What steps should I take to position the button row and table alongside the image, similar to the layout showcased in the initial image in this question? This pertains to a Mono ASP.NET MVC3 application.