JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"></div>

<!--<div class="block">
  <div class="block-col">
    <div class="block-title">Title</div>
  </div>
  <div class="block-col">
    <div class="block-text">Text</div>
  </div>
</div>-->

CSS

.block{  
  display: flex;
}

.block-col{
  padding: 25px;
  border: 1px solid #ccc;
}

JavaScript

class Blocks{
	constructor(container){
  	this._container = container;
    this.render();
  }
  render(){ 	
  	const block = document.createElement('div');
    block.classList.add('block');
    
    for(let i = 1; i <= 2; i++){
    	const blockCol = document.createElement('div');
      blockCol.classList.add('block-col');
      if (i==1) {
          const blockTitle = document.createElement('div');
          blockTitle.classList.add('block-title');
          blockTitle.innerHTML = 'Title';
          blockCol.appendChild(blockTitle);
          block.appendChild(blockCol);
      } else if (i==2) {
          const blockText = document.createElement('div');
          blockText.classList.add('block-text');
          blockText.innerHTML = 'Text';
          blockCol.appendChild(blockText);
          block.appendChild(blockCol);
      }
    }       
    
    this._container.appendChild(block);
    
    return block;
  }
}

const container = document.querySelector('.container');
const blocks = new Blocks(container);