JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sortme">
  
	  <div class="myclass">
	    <p class="hide">1</p>
		<span>2</span>
	  </div>
	  
	  <div class="myclass">
		<p class="hide">2</p>
		<span>1</span>
	  </div>
	  
	  <div class="myclass">
		<p class="hide">3</p>
		<span>4</span>
	  </div>
	  
	  <div class="myclass">
		<p class="hide">4</p>
		<span>1</span>
	  </div>
	  
  </div>

CSS

.hide {display: none;}

JavaScript

var list = document.getElementById('sortme');

var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
	// HERE I need to get to the SPAN Element but how?
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
        itemsArr.push(items[i]);
    }
}

itemsArr.sort(function(a, b) {
  return a.innerHTML == b.innerHTML
          ? 0
          : (a.innerHTML > b.innerHTML ? 1 : -1);
});

for (i = 0; i < itemsArr.length; ++i) {
  list.appendChild(itemsArr[i]);
}