JSFiddle - React, Tailwind, and code Playground

HTML

<div id="column">
    <div class="child"></div>
    <div class="child clip">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    <div class="child"></div>
</div>

<svg>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
    <ellipse cx="0.5" cy="0.5" rx="0.5" ry="0.5"/>
</clipPath>
<rect width="100%" height="100%"/><!-- fills the viewport with black as reference. -->
</svg>
<p id="text"></p>

CSS

#column {
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    column-width: 100px;
    width: 600px;
}
.child {
    height: 200px;
    border: 10px solid lightgreen;
    background-color: cyan;
    margin: 10px;
}
.clip {
    background-color: yellow;
    -webkit-clip-path: url(#clip);
    clip-path: url(#clip);
}
svg {
    width: 200px;
    height: 200px;
}
body {
    margin: 0;
    padding: 0;
}

JavaScript

var rect = document.getElementsByClassName('clip')[0].getBoundingClientRect();
var body = document.getElementById('text');
body.innerHTML = 'width: ' + rect.width + ' height: ' + rect.height;