JSFiddle - React, Tailwind, and code Playground

by effrit

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="info">info</div>
<div class="_outer">
  <div class="_inner">
   111111111111 aaaaaaaaaa   sfsafsf     sdfsdfsfsdf sfsfsfsf    sfsfsfsfsf
  </div>
  </div>
 <div class="_outer"> 
  <div class="_inner">
   22222222222 s sfsfsfsf sfsfsfsfsf sfsfsfs sfsfssssssssssss sssssssssssssss fffffffff gregg egegegeg e gegegegege
  </div>
</div>

CSS

._outer{
  width:160px;
  height:220px;
  display:inline-block;
  vertical-align:top;
  padding:20px;
}

._inner{
  width:100%;
  font-size:30px;
}

.micro{font-size:20px}

JavaScript

$(function() {
    $( "#info" ).text($( "._inner" ).height());   
		$('._inner').each(function(i,elem) {
    	//$(elem).text("333");
    	if ($(elem).height()>$(elem).parent().height()) $(elem).addClass("micro");
     });
  });