JSFiddle - React, Tailwind, and code Playground

by Imran Bughio

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="wrap">
  <ul class="js-equal-dist">
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
  </ul>
</div>

CSS

.wrap{
      padding: 0 14px;
    }
    ul {
      position: relative;
      margin: 0;
      font-size: 0;
      padding: 0;
      display: table;
      width: 100%;
      list-style: none;
    }
    
    ul:after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      background: #000;
      left: 0;
      height: 1px;
      width: 100%;
      z-index: -1;
    }
    
    li {
      display: table-cell;
      text-align: center;
    }
    
    li:first-child {
      text-align: left;
    }
    
    li:last-child {
      text-align: right;
    }
    
    li:first-child span {
      transform: translateX(-50%);
    }
    li:last-child span {
      transform: translateX(50%);
    }
    
    span {
      font-family: sans-serif;
      display: inline-block;
      font-size: 15px;
      line-height: 1em;
      color: #fff;
      background: #000;
      padding: 6px 9.34px;
      border-radius: 999px;
    }

JavaScript

// js-equal-dist
	var totalWidth = $('.js-equal-dist').outerWidth();
	var itemsLength = $('.js-equal-dist li').length;

	var percUnit = 100 / (((itemsLength - 2) * 2) + 2);
	percUnit = percUnit / 100 * totalWidth;

	$('.js-equal-dist li:not(:first-child):not(:last-child)').width(percUnit * 2);
	$('.js-equal-dist li:first-child(), .js-equal-dist li:last-Child()').width(percUnit);