JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<div id="text1">dfvdf df df df df</div>
<div id="text2"><span>dfvdf df df df df</span></div>
<div id="screen1"></div>
<div id="screen2"></div>

CSS

#text1{
    font-size:12px;
    border: 1px solid #ccc;
    width: 300px;
    margin-bottom: 10px;
}
#text2{
    font-size:12px;
    border: 1px solid #ccc;
    width: 300px;
}
#screen1, #screen2{
    border: 1px solid #ccc;;
    float: left;
    height: 20px;
    width: 50px;
    margin-top: 10px;
}

JavaScript

var txt1,txt2, screen1, screen2;

txt1 = document.getElementById("text1");
txt2 = document.getElementById("text2");

screen1 = document.getElementById("screen1");
screen2 = document.getElementById("screen2");

screen1.textContent = txt1.offsetWidth;
screen2.textContent = txt2.firstChild.offsetWidth;