JSFiddle - React, Tailwind, and code Playground

CSS

.exampleElement {
    padding: 5px;
    margin: 6px;
    position:absolute;
    left:-9999px;
    visibility: hidden;
    
}

.exampleElement .exampleP {
    padding: 20px;
    margin: 6px;
}

JavaScript

function exampleElement(caption, content) {
    this.caption = caption;
    this.content = content;
    this.rootElement = document.createElement("div");
}

exampleElement.prototype.constructElement = function() {
    var otherElement = document.createElement("p");
    this.rootElement.className = "exampleElement";
    this.rootElement.textContent = this.caption; 
    otherElement.className = "exampleP";
    otherElement.textContent = this.content;
    this.rootElement.appendChild(otherElement);
    /*I need to know size of the otherElement here*/
    /*here goes code adding stuff into rootElement*/
    document.body.appendChild(this.rootElement);
    //measure as you normally would
    var $otherElement = $(otherElement);
    height = $otherElement.height();
    width = $otherElement.width();
    //when you're done constructing, update the css
    $(this.rootElement).css({
        position: "static",
        left:0,
        visibility:"visible"
    });
};


window.onload = function() {
    var ex = new exampleElement("Hello", "Here's text");
    ex.constructElement();
};