JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="element">
       Dimensions set by content!
    </div>
</div>

<br><br>
<b>Dimensions</b>
<span></span>

CSS

.container {
    display: inline-block;
    position: relative;
    background-color: silver;
}
.element {
    font-size: 20px;
    padding: 10px;
    /* So we don't have to take line-height into consideration during calc() */
    line-height: 1; 
}

.element:before, .element:after {
  content: '';
  display: block;
   /*  100% is for 1:1 aspect ratio */
   /* 10px is taking the contents font-size plus the padding on each side */
    margin-top: calc(50% - 10px);
}

JavaScript

$('span').html('height: ' + $('.container').height() + ', width:' + $('.container').width());