JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><span class="twenty-percent"><span class="rotate">20%</span></span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
   <li><span class="twenty-percent"><span class="rotate">20%</span></span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
    <li><span class="twenty-percent"><span class="rotate">20%</span></span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
    <li><span class="twenty-percent"><span class="rotate">20%</span></span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
    <li><span class="twenty-percent"><span class="rotate">20%</span></span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
    <li><span class="twenty-percent"><span class="rotate">20%</span></span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
    <li><span class="twenty-percent"><span class="rotate">20%</span></span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
    <li><span class="twenty-percent"><span class="rotate">20%</span></span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>

</ul>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    float: left;
    width: 38%;
    
    padding: 0;position:relative;float:left;
margin:15px;background:yellow;display:inline
}
img {
    width: 100%;
}

li img{display:block;}

.twenty-percent {
    content: '';
    background:url(http://i.imgur.com/9cfK5.png) no-repeat;
    position:absolute;
    right:-15px;
    top:-2px;
    width:45px;
    height:45px;
}

.description {display:block; font-size:120%;}

.rotate {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    padding-right: 10px;
    position: absolute;
    right: -35px;
    text-shadow: 0 1px 1px #000000;
    top: 9px;
}

JavaScript

var origWidth = $('.description').width();
var setFontSize = function(){
    var $desc = $('.description');
    $desc.css({fontSize:  $desc.width()/origWidth * 100 + "%" });
} 
    
setFontSize();    
$(window).resize(setFontSize);