SOURCE

var box;
window.addEventListener('DOMContentLoaded', function () {
  var input = document.querySelector('.input'),
    form = document.getElementById('form');
    box = document.querySelector('.box');
  var fragment;
  form.onsubmit = function (e) {
    e.preventDefault();

    let val = input.value;
    var valArr = val.split(',');
    showItems(valArr);
    quickSort(valArr);
  }
})

function showItems (arr) {
  fragment = document.createDocumentFragment();
  arr.forEach((item, index)=> {
    let span = document.createElement('span');
    span.classList.add('item');
    span.innerHTML = item;
    fragment.appendChild(span);
  })
  box.innerHTML = '';
  box.appendChild(fragment);
}
function quickSort (arr) {
  var left = [];
  var right = [];
  
  if(arr.length <=1) {
    return arr;
  }
  var centerIndex = Math.floor(arr.length / 2);
  //console.log(centerIndex);
  var centerItem = arr.splice(centerIndex, 1);
  //console.log(centerItem);
  
  arr.forEach(function (item, index) {
    if(item>=centerItem[0]) {
      right.push(item);
    } else {
      left.push(item);
    }
  });
  
	
  
  return quickSort(left).concat(centerItem).concat(quickSort(right));

  
  
}

<div>
  <form id="form">
    <input type="text" class="input" />
  </form>
  <div class="box">
    
  </div>
</div>

.box {
  width: 500px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}
.item {
   border: 1px solid red;
   color: #333;
  width: 100px;
  height: 100px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}