JSFiddle - React, Tailwind, and code Playground

HTML

<div id="detail-topinfo" class="clearfix"> 

                <img src="http://lorempixel.com/243/243/sports/">

                                <div class="product-info clearfix">
                                <div class="product-heading clearfix">
                                                <h1> Skklla Mcaaaey</h1>
                                                <h2>Smmm-patin listere set</h2>

                                                <p>nomadaaa price 225.95 <span> Save 90.38 </span></p>
                                </div>
                         <div class="product-order">
                                                <span class="final-price">A135.57
                                                 
                                            

                                        </span>
                                </div>       
                </div>

        </div>

CSS

#detail-topinfo {background:red; width: 800px;}

#detail-topinfo img {width:278px;display:block;float: left; }

.product-info {width: 522px; float:left}
.product-heading {
padding-left: 41px;
padding-right: 41px;
padding-top: 34px;
text-transform: uppercase;
padding-bottom: 14px; background: url(../img/texturee.png) #eee}

.product-heading h1 {font-size: 1.5em;
margin-bottom: 0;}
.product-heading h2 {font-size: 2.4em;
margin-top: 0;
margin-bottom: 0;}
.product-heading p { margin-top: 0px;
font-size: 1.2em;
font-weight: bold;}
.product-heading p span {color:#2a2a2a; margin-left: 0px;}


.final-price  {
    background: #fcfcfc;
background-size: 6%;
border: 1px solid #d1d1d1;
font-size: 2.4em;
font-weight: bold;
color: #2a2a2a;
width: 449px;
padding: 7px 6px 7px 18px;
border-radius: 3em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
outline: 0;
display: block;

    }

.clearfix:before, .clearfix:after { content: ""; display: table; }.clearfix:after { clear: both; }.clearfix { zoom: 1; }

 .product-order   {background: #f5f5f5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y1ZjVmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMWQxZDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: linear-gradient(top,  #f5f5f5 0%,#d1d1d1 100%); /* W3C */


padding-left: 23px;
padding-top: 14px;
padding-bottom: 13px;}

JavaScript

$( document ).ready( function() {
                var $body = $('body'); //Cache this for performance
                
                var setBodyScale = function() {
                    var scaleFactor = 0.00125,
                        scaleSource = $body.width(),
                        maxScale = 2.0,
                        minScale = 0.3;

                    var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                    if (fontSize > maxScale) fontSize = maxScale;
                    if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                    //$('body').css('font-size', fontSize + '%');
                    $('#detail-topinfo').css('zoom', fontSize);
                }
            
                $(window).resize(function(){
                    setBodyScale();
                });
                
                //Fire it when the page first loads:
                setBodyScale();
            });