JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tasks">
  <li class="task">
    <input type="checkbox" id="task-1" />
    <label for="task-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </label>
  </li>
  <li class="task">
    <input type="checkbox" id="task-2" />
    <label for="task-2">Task 2</label>
  </li>
  <li class="task">
    <input type="checkbox" id="task-3" />
    <label for="task-3">Task 3</label>
  </li>
</ul>

CSS

.tasks {
  list-style: none;
  margin: 100px auto 0;
  width: 80%;
  padding: 0;
}

.task {
  background-color: #ff6f00;
  padding: 10px;
  color: #fff;
  font-size: 20px;
  margin-bottom: 5px;
  transition: all 0.6s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
}

.task:hover {
  background-color: #B55104;
}

.task.done {
  opacity: 0.6;
}

.task.done label {
  white-space: no-break;
}

JavaScript

$('.tasks label').click(function(e) { e.preventDefault(); } )

$(".task").click(function (e) {
        var cb = $(this).find(":checkbox")[0];
        if (e.target != cb) cb.checked = !cb.checked;
        $(this).toggleClass("done", cb.checked);
    });