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;
 

 while(fontSize2 < 50){
	fontSize2 += 1;
	widthVar = 0; 

	jQuery('.menu li').each(function(){
  	//THIS LINE IS ANOTHER IMPORTANT LINE
		widthVar += jQuery('.menu li').outerWidth();
		
		
	});
	console.log("Combined widths of LI's: "+widthVar);
  
  //THIS LINE IS THE IMPORTANT LINE
 	jQuery(".menu").after(fontSize2 + "<p>Combined widths of LI's 2: " + widthVar + "</p>");
  
  jQuery('.menu li a').css('font-size',fontSize2 +'px');
  

 }