JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
 
<pre id="out"></pre>

CSS

div {
    width: 60px;
    padding: 10px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
    transform: scale(0.5);
    border: 2px solid pink;
    padding: 0.5em;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  
  pre {
    display: flex;
  }

JavaScript

$( "div" ).one( "click", function() {
out.textContent +=  $( this ).outerWidth(  ) + ' '
out.textContent +=  this.offsetWidth + '\n';
});