JSFiddle - React, Tailwind, and code Playground

by dreamyguy

HTML

<ul>
  <li>
    <a href="">blah blah blah blah blah blah blah blah blah</a>
    <span class="news-list-meta">
      <span class="news-list-date">
        <i class="icon icon-time"></i>
        12:30
      </span>
      <span class="news-list-source">
        <i class="icon icon-link"></i>
        <a href="#">aftenposten.no</a>
      </span>
    </span>
  </li>
  <li>
    <a href="">blah blah blah blah blah blah blah</a>
    <span class="news-list-meta">
      <span class="news-list-date">
        <i class="icon icon-time"></i>
        12:37
      </span>
      <span class="news-list-source">
        <i class="icon icon-link"></i>
        <a href="#">vg.no</a>
      </span>
    </span>
  </li>
  <li>
    <a href="">blah blah blah blah blah blah blah blah</a>
    <span class="news-list-meta">
      <span class="news-list-date">
        <i class="icon icon-time"></i>
        13:28
      </span>
      <span class="news-list-source">
        <i class="icon icon-link"></i>
        <a href="#">dagblatet.no</a>
      </span>
    </span>
  </li>
  <li>
    <a href="">blah blah blah blah</a>
    <span class="news-list-meta">
      <span class="news-list-date">
        <i class="icon icon-time"></i>
        14:02
      </span>
      <span class="news-list-source">
        <i class="icon icon-link"></i>
        <a href="#">abcnyheter.no</a>
      </span>
    </span>
  </li>
  <li>
    <a href="">blah blah blah blah blah blah blah blah blah</a>
    <span class="news-list-meta">
      <span class="news-list-date">
        <i class="icon icon-time"></i>
        15:16
      </span>
      <span class="news-list-source">
        <i class="icon icon-link"></i>
        <a href="#">klikk.no</a>
      </span>
    </span>
  </li>
  <li>
    <a href="">blah blah blah blah blah blah blah</a>
    <span class="news-list-meta">
      <span class="news-list-date">
        <i class="icon icon-time"></i>
        17:09
      </span>
      <span class="news-list-source">
        <i class="icon...

CSS

ul { margin: 15px; }
.news-list-meta { float: right; }
.news-list-meta span { float: left; margin-left: 15px; }

JavaScript

// global variable, this will store the highest width value once the function is run
var maxWidth = 0;
function setWidth(item) {
    // get all instances with relevant class
    item = $('.news-list-meta');
    // loop all the instances
    item.each(function() {
        // if the width is greater than null
        if($(this).outerWidth() > maxWidth) {
            // store the highest width
            maxWidth = $(this).outerWidth();
        }
    });
    // set the width
    item.outerWidth(maxWidth);
}
// run function on docready
setWidth();