JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://bulma.io/css/bulma-docs.min.css?v=201806071228">
<script defer="" src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<div class="tabs is-fullwidth">
  <ul>
    <li>
      <a>
        <span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
        <span>Left</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
        <span>A very long thing with a lot of text</span>
      </a>
    </li>
    <li>
      <a>
        <span>Right</span>
        <span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
      </a>
    </li>
  </ul>
</div>

CSS

li {
    width: 33.333%;
}

span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}