JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<ul>
        <li>
            <input type="checkbox" id="cbox1" />
            <label for="cbox1">This is a short label</label>
            <div class="infoIcon">(i)</div>
        </li>
        <li>
            <input type="checkbox" id="cbox2" />
            <label for="cbox2">This is a bit longer label</label>
            <div class="infoIcon">(i)</div>
        </li>
        <li>
            <input type="checkbox" id="cbox3" />
            <label for="cbox3">This is a really long label that wraps</label>
            <div class="infoIcon">(i)</div>
        </li>
        <li>
            <input type="checkbox" id="cbox4" />
            <label for="cbox4">This is a really long label that wraps onto many, many, many, many lines</label>
            <div class="infoIcon">(i)</div>
        </li>
    </ul>

CSS

ul, li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ul {
  border: 1px solid red;
  width: 200px;
}

li {
  margin: 10px 0;
}


li *
{
  vertical-align: top;
}

label
{
  border: 1px solid green;
  display: inline-block;
  max-width: 150px;
}

.infoIcon
{
  color: blue;
  display: inline-block;
}

JavaScript

$.fn.textWidth = function () {
    var html_org = $(this).html();
    var html_calc = '<span>' + html_org + '</span>';
    $(this).html(html_calc);
    var width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
};

$(document).ready(function () {
    $("label").each(function ()
    {
        $(this).width($(this).textWidth() + 2);
    });
});