JSFiddle - React, Tailwind, and code Playground

HTML

<p style="color:grey;">
  If you resize this window, please hit Run again.
  </p>
  <ul>
    <li class="notLast">Item 1</li>
    <li class="notLast">Item 2</li>
    <li class="notLast">Item 3</li>
    <li class="notLast">Item 4</li>
    <li class="notLast">Item 5</li>
    <li class="notLast">Item 2</li>
    <li class="notLast">Item 3</li>
    <li class="notLast">Item 4</li>
    <li class="notLast">Item 5</li>
  </ul>

SCSS

body {
  text-align: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display:inline-block;
  position:relative;
  margin:0 5px 0 5px;
}

li.notLast {
  &:not(:last-child):after {
    display:block;
    content: ' |';
    position:absolute;
    top:0;
    right:-9px;
  }
}

JavaScript

var listItems = document.getElementsByTagName("li");
var listItemsWidth = [];
var listItemsDistance = [];


for (let i = 0; i < listItems.length; i++) {
  listItemsWidth[i] = listItems[i].offsetWidth;
  listItemsDistance[i] = listItems[i].getBoundingClientRect().right;
}

for (let i = 0; i < listItems.length; i++) {
  if (listItemsDistance[i] == Math.max.apply(null, listItemsDistance)) {
    listItems[i].classList -= "notLast";
  } else {
    listItems[i].classList = "notLast";
  }
}