title: How to get the max-width in li element
body: <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>