JSFiddle - React, Tailwind, and code Playground

HTML

<div class=" " style="width:100%; height:auto;" >
need to specifiy cssselector flex-container and flex-item in the **doit()** function
</br> 
only applied  if flex-dir == column && (align-items == flex-start  or flex-end )  . you can extend that to row  if you want
</br> 
also timer handles div resizing via code every 500ms.

</div>
<div class="flex-cont  ">
  <span class="flex-item">asdasdasd </span>
  <span class="flex-item">asdasdasd</span>
  <span class="flex-item">and </span>
  <span class="flex-item">asdasd</span>
  <span class="flex-item">or flex-end </span>
  <span class="flex-item">------</span>
  <span class="flex-item">asdasd</span>
  <span class="flex-item">I'm v/h c!</span>
  <span class="flex-item">-------</span>
  <span class="flex-item">---------</span>
  <span class="flex-item">--------</span>
  <span class="flex-item">I'm v/h c!</span>
  <span class="flex-item">I'm v/h c!</span>
  <span class="flex-item">I'm v/h c!</span>
  <span class="flex-item">I'm v/h !</span>
  <span class="flex-item">I'm v/h cccc!</span>
</div>

<div class="flex-cont cont-resize">
  <span class="flex-item" >cont-resize is </span>
  <span class="flex-item" >specific selecto</span>
  <span class="flex-item">--</span>
  <span class="flex-item">single column</span>
  <span class="flex-item">centered by margin</span>
</div>

CSS

html,
body,
.container {
  height: 100%;
}

.flex-cont {
  display: inline-flex;
  flex-flow: column wrap;
  align-items: flex-end;
  align-content: space-evenly;
  width: 48%;
  height: 190px;
  border: 1px solid black;
}

.flex-item {
  flex: 0 1 auto;
  border-bottom: 1px dotted black;
}

JavaScript

var debug = true;

		class ertTimer {
		  constructor(funcName ,intervalms=3500, maxRunDuration=20000 , StopIfReturnsTrue=true ) {

		  	  this.intervalObj = setInterval(function(){
				console.log("interval - funcName:" + funcName.name);
		 		try{  
		 			var res = funcName();

					if(StopIfReturnsTrue)
			            if(res == true)
			            	clearInterval(intervalObj);

		 		} catch(exx){console.warn(exx.message, exx.stack);}
			}, intervalms);
			// after 15 sec delete interval
			setTimeout( function(){ clearInterval( intervalObj ); },maxRunDuration);

		    this.intervalms = intervalms;
		    this.maxRunDuration = maxRunDuration;
		  }

		  get getter_intervalms() { return this.intervalms; }
		  calcRepeatTimes() { 
		   return this.maxRunDuration / this.intervalms;
		  }
		}


		var center_ONsingleCol_nonFF = function(contNode, itemSelector) {
		  var items = contNode.querySelectorAll(itemSelector);
		  //arr.count shoud be 1 element  // items[0].style.alignItems = "center";
		  var parItem = items[0].parentNode;
		  var parItemR = parItem.getBoundingClientRect();
		  var parWidth = parItemR.width;
		  var maxItemWidth = 0;

		  for (var k = 0; k < items.length; k++) {
		    var currItem = items[k].getBoundingClientRect();
		    if (currItem.width > maxItemWidth) 
		       maxItemWidth = currItem.width;
		    //console.log(parWidth, itemWidth);
		  }
		  
		  var alignItemsVal = getComputedStyle_propValue(parItem , "align-items");
		  var flexDirVal = getComputedStyle_propValue(parItem , "flex-direction");
		  

		  var iswrapped = isWrapped(contNode ,itemSelector );
		  for (var k = 0; k < items.length; k++) {
		    if(iswrapped && flexDirVal ==  "column" ){
		      if(alignItemsVal == "flex-end"){
		        items[k].style.marginRight = "" + ((parWidth - maxItemWidth) * 0.5) + "px";
		        items[k].style.marginLeft = "";
		      }
		      else if(alignItemsVal == "flex-start"){
		        items[k].style.marginRight = "";
		       ...