JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent" style="width:500px;">
     <span>1</span>
     <span>2</span>
     <span>3</span>
     <span>4</span>
</div>

CSS

span{ display:inline-block; }

JavaScript

function getChildElementCount(element){
 var childCounter = 0;
 var startPoint = element.childNodes;
 for (var child in startPoint) {
  //not an element
  if (startPoint[child].nodeType != 1) continue; 
  childCounter++;
 }
 return childCounter;
}
function getIndividualWidth(element){
 return parseInt(element.offsetWidth / getChildElementCount(element));
}

function EqualizeChildWidths(element){
 var width = getIndividualWidth(element);
 var startPoint = element.childNodes;
 for (var child in startPoint) {
  if (startPoint[child].nodeType != 1) continue;
  startPoint[child].style.width = width + "px";
 }
}    

EqualizeChildWidths(document.getElementById("parent"));