Unordered list with input checkbox wrap text align with first line

I've got an unordered list with an input box as a checkbox. But I'm trying to get the text align left if there is a long line and the text has to wrap. I don't want it to left align with the checkbox, I want it to left align with the first line of text. But I just cannot figure out how to do it. I tried using a margin-left and a negative text-indent, but I don't think that is working. Here is my codepen that shows what I'm trying to do:
https://codepen.io/clizlee/pen/abbZzjr

<ul class="no-bullet">
  <li><input type="checkbox" id="bookid001"> <label for="bookid001">Title of Book Number One</label></li>
  <li><input type="checkbox" id="bookid002"> <label for="bookid002">Title of Book Number Two with an Extra Long Book Title that will Wrap to the Next Line</label></li>
  <li><input type="checkbox" id="bookid003"> <label for="bookid003">Title of Book Number Three</label></li>
</ul>

And here is the css:

ul.no-bullet li { 
  margin-bottom: 0.5em; 
}
ul.no-bullet li input { 
  margin-bottom: 0; 
}
ul.no-bullet li label { 
  display: inline;
  margin-left: 1rem;
  text-indent: -1rem;
}