title: Is it possible to align element's width like in a table with CSS without altering HTML?
body: <p>I've put together a <a href="http://jsfiddle.net/LSVRf/1" rel="nofollow noreferrer">demo</a> of current menu.
  It is not feasible to change HTML structure.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="menu row1"&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;varied item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="menu row2"&gt;
      &lt;li&gt;longer item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;longer item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.menu li {
      display: inline-block; border-right: 1px solid; 
      padding: 0 10px; margin: 0; line-height: 32px;
  }
  .menu {border: 1px solid; margin: 10px 10px 0;}
  .menu.row2 {margin-top: 0; border-top: 0;}
  .menu li, .menu {border-color: #888;}
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var $row0 = $('.menu.row1 &gt; li');
  var $row1 = $('.menu.row2 &gt; li');
  
  for (x=0; x &lt; $row0.length; x++) {
      if (typeof $row1[x] != 'undefined') {
          var w1 = $($row0[x]).width();
          var w2 = $($row1[x]).width();
          var w3 = Math.max(w1, w2);
  
          $($row0[x]).add($row1[x]).width(w3);
      }
  }
  </code></pre>
  
  <p>Is it possible to get same effect as current JS with CSS only? Thanks.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Thanks to <a href="https://stackoverflow.com/users/1437016/big00d">Big00d</a> for answering this. I updated the <a href="http://jsfiddle.net/LSVRf/2/" rel="nofollow noreferrer">demo</a>.</p>
  
  <p><strong>New CSS</strong></p>
  
  <pre><code>.menu li {
      display: table-cell; border: 1px solid #888; 
      padding: 0 10px; margin: 0; line-height: 32px;
      border-left: 0;
  }
  .menu {margin: 10px 10px 0; display: table-row;}
  .menu.row2 {margin-top: 0;}
  .menu.row2 li {border-top: 0;}
  </code></pre>
  
  <p><a href="http://caniuse.com/#feat=css-table" rel="nofollow noreferrer">Supported</a> by IE8 and above.</p>