JSFiddle - React, Tailwind, and code Playground

by _ajm

HTML

<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>

CSS

div{ float: left; }
#one{ height: 50px; width: 200px; background: red; }
#two{ height: 80px; width: 150px; background: green; -webkit-transform:rotate(105deg); position:relative; left: -50px; }
#three{ height: 90px; width: 125px; -webkit-transform: rotate(88deg); position:relative; left: -100px; background: yellow; }

JavaScript

var bb1 = document.getElementById('one').getBoundingClientRect();
var bb2 = document.getElementById('two').getBoundingClientRect();
var bb3 = document.getElementById('three').getBoundingClientRect();
console.log(bb1)
console.log(bb2)
console.log(bb3)
var totalWidth = Math.max(bb1.right, bb2.right, bb3.right) - Math.min(bb1.left, bb2.left, bb3.left);

var totalHeight = Math.max(bb1.bottom, bb2.bottom, bb3.bottom) - Math.min(bb1.top, bb2.top, bb3.top);

console.log('width is ' + totalWidth + ' and height is ' + totalHeight)