JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div data-font="Arial" data-width="">Просто текст</div>
<div data-font="Courier New" data-width="">Просто текст</div>
<div data-font="Tahoma" data-width="">Просто текст</div>
<div data-font="Times New Roman" data-width="">Просто текст</div>
<div data-font="Trebuchet MS" data-width="">Просто текст</div>
<div data-font="Verdana" data-width="">Просто текст</div>
<div data-font="Open Sans" data-width="">Просто текст</div>

CSS

div{
    position: relative;
    border: 1px solid #000;
    float: left;
    clear: left;
}

div:after{
    content: attr(data-font);
    position: absolute;
    top: 0;
    width: 300px;
    left: 200px;
}

div:nth-of-type(1){
    font-family: 'Arial';
}
div:nth-of-type(2){
    font-family: 'Courier New';
}
div:nth-of-type(3){
    font-family: 'Tahoma';
}
div:nth-of-type(4){
    font-family: 'Times New Roman';
}
div:nth-of-type(5){
    font-family: 'Trebuchet MS';
}
div:nth-of-type(6){
    font-family: 'Verdana';
}
div:nth-of-type(7){
    font-family: 'Open Sans';
}

JavaScript

$('div').each(function() {
   var $div = $(this),
       w = $div.width(),
       h = $div.height();
    $div.attr({
        'data-width': w,
        'data-height': h
    });
});