JSFiddle - React, Tailwind, and code Playground

by Town

HTML

<ul>
    <li>First line, not that long</li>
    <li>Second line is much longer but still not as long as the UL</li>
    <li style="width: 200px;">Third line, has specific width set</li>
</ul>
<button id="firstLine">Tell me the width of the first line</button>
<button id="secondLine">Tell me the width of the second line</button>
<button id="thirdLine">Tell me the width of the third line</button>

CSS

ul {border: 1px solid black; }
button {display: block; }

JavaScript

$('#firstLine').click(function() {
    alert($('li:eq(0)').width());
});

$('#secondLine').click(function() {
    alert($('li:eq(1)').width());
});

$('#thirdLine').click(function() {
    alert($('li:eq(2)').width());
});