Делаем блоки одинаковой ширины с помощью Javascript

Можно сделать блоки одинаковой ширины с помощью Flex, можно задать ширину с помощью фиксированных размеров, но есть задача когда, нужно сделать блоки одинаковой ширины, основываясь на размере самого широкого блока. Группы этих блоков могут дублироваться и иметь разные размеры, и наша задача в каждой такой группе найти больший по ширине блок и задать остальным такую же ширину.

В общем, задача понятна, и наш код будет основан на коде из этой статьи Делаем колонки одинаковой высоты с помощью JS.

Примерный исходный код (может быть любой другой):

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#faq-1">Art</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#faq-2">Video</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#faq-3">Photo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#faq-4">Digitalization
</a>
  </li>
</ul>

Код Javascript, с помощью которого находим самый широкий элемент и задаем его ширину для всех остальных элементов. Поиск элементов выполняется по классу .nav-item:

$(function() {
  // Blocks same width
  (function makeTabsSameWidth() {
    function setEqualWidth(tabs) {
      var maxWidth = 0;
 
      tabs.each(function() {
        currentWidth = $(this).outerWidth();
        if (currentWidth > maxWidth) {
          maxWidth = currentWidth;
        }
      });
 
      tabs.width(maxWidth);
    }
    setEqualWidth($(".nav-item"));
  })();
});

Рабочий пример скрипта, который задает всем блокам одинаковую ширину:

See the Pen Blocks Same Width with JS by Denis (@deniscreative) on CodePen.0