JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"><div id="content" role="main">
<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">
<a class="home" href="http://xxx">Home</a> &#47; Aloe Vera Soothing Face Cream</nav>
  <div itemscope itemtype="http://schema.org/Product" id="product-276" class="post-276  product type-product status-publish shipping-taxable product-type-simple instock">
<div class="images">
<a href="http://lorempixel.com/258/300/" itemprop="image" class="woocommerce-main-image zoom" title="Appeal Aloe Vera Soothing Face Cream" data-rel="prettyPhoto">
    <img width="258" height="300" 
     src="http://lorempixel.com/258/300/" 
     class="attachment-shop_single wp-post-image" 
     alt="Appeal Aloe Vera Soothing Face Cream" 
     title="Appeal Aloe Vera Soothing Face Cream" /></a>    
</div>
<div class="summary entry-summary">
    <h1 itemprop="name" class="product_title entry-title">Aloe Vera Soothing Face Cream</h1>
    </div>
</div><!-- .summary -->

CSS

#container {
    border:1px solid red;
}
#product-276 {
    position:relative;
    height:400px;
}
.summary {
    border:1px solid green;
    position:absolute;
    top:0;
}
.images {
    border:1px solid purple;
    position:absolute;
    bottom:0;
}