Some CSS Alignment issues with bootstrap

I'm trying to align my product box to look like this:

What I have thus far:

jsFiddle

I'm just trying to obtain the results of the "boxed" area, but I cannot for the life of me figure out this alignment.

I've included external resources to my JS & CSS as well.

HTML is below:

<section id="product">
	<div class="container White_BG">
		<aside class="col-md-4">
			<!--Category-->
			<div class="sidewidt2">
				<div class="productprice" id="StandardProductBox">
					<div id="ItemNumber">
						<span itemprop="identifier" content="sku:EB06">
							<p># EB06</p>
						</span>
					</div>   
					<div itemprop="availability" id="StockStatus" content="in_stock">
						<strong>Out of Stock,</strong>
						Please call for availability
					</div>     			
					<p class="prod-det-price">Call for Pricing</p>  
					<label for="qtyproduct" id="qtylabel">Qty</label>
					<input id="qtyproduct" type="text" value="1" name="dmilist_Qty_100000060715">
					<ul class="productpagecart">
						<li>
						<span style="position:relative;">
						  <input type="submit" id="DisabledAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled">
						  <div class="DisabledCart" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor:not-allowed;"></div>
						</span>
						<div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X">
						        <h4 class="modal-title" id="myModalLabel">Not Available Online</h4>
						      </div>
						      <div class="modal-body">
						        <div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
						      </div>						        
						      </div>
						    </div>
						  </div>
						</li>
					</ul>
				</div>
			</div>
			<div class="ShipWeight" id="ShipWeight">
			    Weight: 29.80 lbs
			</div>
		</aside>
	</div>
</section>

I'm not sure what you have the ability to adjust and what you don't, but you can do this a couple ways by changing the markup and the classes. I'll show you the finished product and you'll have to work to convert your markup to something like this.

If you want half the content to hug the left, and the other half to hug the right, you should keep each separate. You can float one section left and the other right (.pull-left and .pull-right in Bootstrap), but since you're already using Bootstrap, why not use their grid system for layout. That's what it's there for!

So set up your shopping cart item, and add a .row inside of it, and then split the content in half with two divs with .col-xs-6. Put the content inside each div. The content for the one on the right can align to the right by using .text-right.

Like this:

<div class="ItemBox ">
    <div class="row">
        <div class="col-xs-6">
            <b>#EBRO1</b><br/>
            Call for pricing.<br/><br/>
            <label for="qtyInput" >Qty</label>
            <input type="text" id="qtyInput" />
        </div>
        <div class="col-xs-6 text-right">
            <b>Out of Stock,</b><br/>
            Please call for availability <br/><br/>
            <button class="btn btn-default">Add to Cart</button>
        </div>
    </div>
</div>

Demo in fiddle

Which will look like this: