JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div class="box">
  <div class="center_container">
    <div class="subtitle"></div>
    <div class="info01"></div>

    <div class="container_price">
      <div class="price"></div>
    </div>

    <div class="texto_final"></div>
  </div>
</div>

CSS

.box {
  width: 110px;
  height: 250px;
  background-color: red;
  margin: 10px;
  text-align: center;
}
.center_container {
    position: relative;
    /* top: 20px; */ 
}
.subtitle {
  position: relative;
  width: 100%;
  background-color: lightblue;
  white-space: normal;
}

.info01 {
  position: relative;
  width: 100%;
  background-color: lightyellow;
  white-space: nowrap;
}


/* PRICE CONTAINER*/

.container_price {
  position: relative;
  width: 100%;
  background-color: grey;
  white-space: nowrap;
}

.texto_final {
  position: relative;
  width: 100%;
  background-color: #bcb8b8;
  white-space: normal;
}

JavaScript

function _(element) {
   return document.querySelector(element);
 }

	// FIT TEXT
 function fitTextWidth(_el, text) {

   var element = _el;
   var height = element.offsetHeight;
   var width = element.offsetWidth;

   var textElement = document.createElement('span');
   var txt = document.createTextNode(text);
   textElement.appendChild(txt);
   element.appendChild(textElement);

   var FontSize = 100;
   //element.style.fontSize = FontSize + 'px'; 

   while (textElement.offsetWidth > width) {
     element.style.fontSize = --FontSize + 'px';
   }
   return element;
 }
	
  
  
 // CENTER CHILDS
 function forEach(arr, cb) {
   for (var index = 0; index < arr.length; index++) {
     cb(index, arr[index]);
   }
   return arr;
 }

 function css(element, key, value) {
   if (value) {
     element.style[key] = value;
     return element
   } else {
     return element.style[key];
   }
 }

 function getHeight(element) {
   return element.offsetHeight
 }
 
 function center (dady, childs) {
 		var dadyHeight = getHeight(dady);
    var chi
 }	

 function centerChildrens(_dady, spaceBetween) {

   var dady = _dady;
   var dadyHeight = getHeight(dady);
   
   var totalUsableChilds = 0;
   var totalChildsHeight = 0;

   forEach(dady.childNodes, function(index, child) {
     if (child.className !== undefined) {       
       if(child.className === "center_container") {       		     
          forEach(child.childNodes, function (index, subChild) {      		 
          		if (subChild.className !== undefined) {
              	css(subChild, "margin-top", spaceBetween + "px");
              }
          })
       }
       totalChildsHeight += getHeight(child);
       totalUsableChilds++;
     }
   })
   
  var diff = dadyHeight - totalChildsHeight;
	var topDist = diff/2
  
  css(dady.querySelector(".center_container"), "top", topDist + "px");
 	
 }
 
 



 // TEST ZONE:

 // SYNC OPERATIONS
 fitTextWidth(_(".subtitle"), "Ofertas Imperdíveis, compre agora mesmo!");
...