JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <div id="inner">
      <div class="move one">number</div>
      <div class="move two">count</div>
      <div class="move three">height</div>
      <div class="move four">weight</div>

      <div class="move five">cost</div>
      <div class="move six">address</div>
      <div class="move seven">tell time</div>
      <div class="move eight">exchange</div>
    </div>

CSS

* {
  padding: 0px;
  margin: 0px;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

#wrapper {
  width: 100%;
  height: 100%;
  margin: 0% auto;
  overflow: hidden;
  position: absolute;
}

#inner {
  width: 100%;
  height: 20vmin;
  position: absolute;
  top: 60%;
}

.move {
  position: absolute;
}



.one {
  margin-left: 0px;
}

JavaScript

var boxes = $('#inner>div');
  var speeds = [
0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5
];

function update() {
  var width = $('#wrapper').width;

  // update boxes
  for (var i = 0; i < boxes.length; i++) {
    var box = $(boxes[i]);
    var speed = speeds[i];
    var leftPos = box.position().left;
    box.css({left: leftPos + speed});

    if (leftPos > $(window).width()) {
    $(window).resize(function () {
         $('#inner>div:nth-child(even)').css({
            left: '+=2vmin',
            marginLeft: '10px'
          })

          $('#inner>div:nth-child(odd)').css({
            left: '+=2vmin',
            marginLeft: '10px'
          })
       });

      box.css({left: '-10vmin'});
    }
  };
  window.setTimeout(update, 20);
};

$('#inner>div').each(function(i){
	$(this).css('left', i * 80);
});

update();

$('#inner>div').draggable({
	helper: 'clone'
});