JSFiddle - React, Tailwind, and code Playground

by tubescreamer84

HTML

<ul class="menu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test Two</a></li>
</ul>

<a href="#" class="clickme">Click to run</a>

CSS

.menu li a{
  font-size:1em;
}
.menu li{
  display:inline-block;
 }

JavaScript

var fontSize2 = 0;
var widthVar =0;
 
 $('.clickme').click(function(){
 while(fontSize2 < 100){
	fontSize2 += 2;
	widthVar = 0; 

	$('.menu li').each(function(){
		widthVar += $('.menu li').outerWidth();
		
		
	});
	console.log("Combined widths of LI's: "+widthVar);
 	
  $('.menu li a').css('font-size',fontSize2 +'px'); 

 }
 

});