JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<ul style="display: inline-block; list-item-style: none">
  <li id="foo" style="float: left; list-style-type: none; position: relative;">
    <a href="#">brief text</a>
    <div id="bar" style="position: absolute; width:100px;">
      <ul>
        <li>a long chunk of text</li>
        <li>an even longer piece of text</li>
      </ul>
    </div>
  </li>
</ul>

CSS

#bar li {
    white-space: nowrap !important;
}

JavaScript

/*

// First, gett he current width
var w = $('#bar').width();

// Next, we want to go through each element and find the width of it. To do this,
// we use a <span> and attach it to the DOM, then read it's value.
var s = $('<span>').css('display','none').appendTo('body');
$('#bar li').each(function(i,e){
    s.text($(this).text());
    if (s.width()>w)
        w = s.width();
});
s.remove();

// now that we have the biggest width, let's modify the #bar accordingly
$('#bar').css('width',w+'px');

//*/