JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="teleporter">
  <li>List item 0</li>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
  <li>List item 7</li>
  <li>List item 8</li>
  <li>List item 9</li>
  <li>List item 10</li>
  <li>List item 11</li>
  <li>List item 12</li>
  <li>List item 13</li>
</ul>
<div>More:
  <ul id="receiver"></ul>
</div>

CSS

#teleporter {
  height: 20px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}

li {
  float: left;
  padding: 0 10px;
  box-sizing: border-box;
  list-style: none;
}

JavaScript

var tele = document.getElementById('teleporter'),
  rec = document.getElementById('receiver');

window.onresize = resize;
resize();

function resize() {
        const rChildren = rec.children;
        let numW = 0;
        
        [...rChildren].forEach(item => {
          item.outHTML = '';
          tele.appendChild(item);
        })  

        const teleW = tele.offsetWidth,
          tChildren = tele.children;

        [...tChildren].forEach(item => {
          numW += item.offsetWidth;

          if (numW > teleW) {
            item.outHTML = '';
            rec.appendChild(item);
          }
        });
      }