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 {
  content: '';
  display: block;
   /*  100% is for 1:1 aspect ratio */
   /* 40px is taking the contents font-size plus the padding on each side */
    margin-top: calc(100% - 20px);
}

JavaScript

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