<div class="product-details-row">
<div class="product-details-column"><!-- Image here -->
    <img class="product-details-image" src="https://pmcvariety.files.wordpress.com/2018/01/carey-mulligan1.jpg?w=700" />
</div>

<div class="product-details-column product-details-right"><!-- Product details here -->
    <h3 class="product-name">{{ product.title }}</h3>

    <div class="product-gallery-heading">
        {{ ImagsGallaryheading[imagesgallaryheading] }}
    </div>

    <section class="price-and-reviews-row">
        <div style="width: 50%; height: auto;float: left;">
            <span>
                <p class="product-content-box-price">
                    <span>{{ current_variant.price | money }}</span>
                </p>
            </span>
        </div>

        <section>
            <p class="product-hero-image-content-box">{{ product.description }}</p><!-- Product details grows/shrinks here -->
        </section>
    </section>

    <hr style="display: block; height: 1px; border: 0; border-top: 1px solid rgba(215,215,215,0.5); margin: 1em 0; padding: 0;">

    <p class="color-box available-from">Available colours:</p>
    <div class="color-square-container green-color-square"></div>
    <div class="color-square-container blue-color-square"></div>

    <div class="btn_banner">
        <div class="button-buy">
            <!-- N/A content removed -->
        </div>
    </div>
</div>

.product-details-row {
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
margin-bottom:2.5em;
}
.product-details-column {
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
img.product-details-image {
display:block;
max-width:100%;
height:auto;
width:auto;
}
.product-details-right {
background-color:#C15031;
padding:2em;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35);
color:#ffffff;
}
.product-gallery-heading {
font-family:Comfortaa;
color:#d7d7d7;
}
.price-and-reviews-row {
margin-top: 4em;
margin-bottom: 2em;
}
p.product-content-box-price {
color: #ffffff;
font-size: 2em;
font-weight: 400;
}
p.product-hero-image-content-box {
color:#333333;
font-family:Arial;
font-weight:300;
}
.available-from {
color:#ffffff;
font-family:Comfortaa;
font-weight:400;
font-size:0.8em;
}
.color-square-container {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid #ffffff;
}
.green-color-square {
background: #009966;
}
.blue-color-square {
background: #ab3fdd;
}