How to get the max-width in li element
<p>Ex(pseudo-code):</p>

<pre><code>&lt;ul class="menu"&gt;
  &lt;li class="extended"&gt;
    &lt;div class="columns column1"&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
        &lt;li&gt;Item 3&lt;/li&gt;
        &lt;li&gt;Item 4&lt;/li&gt;
        &lt;li&gt;Item 5&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li class="extended"&gt;
    &lt;div class="columns column2"&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 6&lt;/li&gt;
        &lt;li&gt;Item 7&lt;/li&gt;
        &lt;li&gt;Item 8&lt;/li&gt;
        &lt;li&gt;Item 9&lt;/li&gt;
        &lt;li&gt;Item 10&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;


&lt;ul class="menu"&gt;
  &lt;li class="extended"&gt;
    &lt;div class="columns column1"&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
        &lt;li&gt;Item 3&lt;/li&gt;
        &lt;li&gt;Item 4&lt;/li&gt;
        &lt;li&gt;Item 5&lt;/li&gt;
        &lt;li&gt;Item 6&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li class="extended"&gt;
    &lt;div class="columns column2"&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 7&lt;/li&gt;
        &lt;li&gt;Item 8&lt;/li&gt;
        &lt;li&gt;Item 9&lt;/li&gt;
        &lt;li&gt;Item 10&lt;/li&gt;
        &lt;li&gt;Item 11&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And the goal is to be like this:</p>

<pre><code>Item 1 | Item 6
Item 2 | Item 7
Item 3 | Item 8
Item 4 | Item 9
Item 5 | Item 10
</code></pre>

<p>or</p>

<pre><code>Item 1 | Item 7
Item 2 | Item 8
Item 3 | Item 9
Item 4 | Item 10
Item 5 | Item 11
Item 6
</code></pre>

<p>Question:
I want to get the max width of <code>column1</code> and <code>column2</code> then add the result and set as width of <code>main-wrapper</code>:
totalWidth = column1 + column2
$('.main-wrapper').css('width', totalWidth);</p>

<p>My implentation:</p>

<pre><code>var $listing = $(this).find('ul.menu .extended ul li'); 
var $col1, $col2;
// Loop through all target submenu lists
$listing.each(function(key, value) {
   var $t = $(value);
   if(key == 0) {
   // Get the width of the first column
     $col1 = $t.outerWidth(true);
   } else if(key == $listing.length-1) {
     // Get the width of the second column
     $col2 = $t.outerWidth(true);
    }
});
// Store the total width of columns in variable
var $total_width = $col1 + $col2 + 46;  
// Append the width in the parent ul element
$(this).find('ul.menu').css('width', $total_width);
</code></pre>

<p>But my script only get the width correctly if the text has no spaces.</p>
