h1 not showing in flex box

Question

I am making a google extension that shows a div overlay. However, on the inner div, the second h1 (Small Label) is not showing up. Here is the code:

chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
      //defined and styled other div
      //div within the div
      var labelBackground = document.createElement('div');
      labelBackground.width = '20rem';
      labelBackground.height = '10rem';
      labelBackground.style.display = 'flex';
      labelBackground.style.flexDirection = 'column';
      labelBackground.style.position = 'absolute';
      labelBackground.style.top = '25%';
      labelBackground.style.left = '60%';

      var label = document.createElement('h1');
      label.innerHTML = "Text one"; //showing properly
      label.style.color = 'white';
      label.style.fontSize = '4rem';
      label.style.textAlign = 'center';

      var smallLabel = document.createElement('h1');
      smallLabel.innerHTML = "Text 2"; //not showing properly
      smallLabel.style.fontSize = '1.5rem';
      smallLabel.style.marginBottom = '1rem';

    //Description
      var description = document.createElement('p');
      smallLabel.innerHTML = "Text 3";

      labelBackground.appendChild(label);
      labelBackground.appendChild(smallLabel);
      labelBackground.appendChild(description);
      div.appendChild(labelBackground);
      document.body.appendChild(div);
      sendMessage({msg:'recieved'})
})