JSFiddle - React, Tailwind, and code Playground

HTML

<ul>        
    <li>
        <input type="checkbox" value="1" name="test[]" id="myid1">
        <label for="myid1"> label1  label1  label1  label1  label1  label1  label1  label1  label1  label1  label1  label1  label1  label1               </label>
    </li>
    <li>
        <input type="checkbox" value="2" name="test[]" id="myid2">
        <label for="myid2">label2</label>
    </li>
</ul>

CSS

ul {
  width: 300px; /* Only for demonstration. */
  border: 1px dashed gray;
}

li {
    display: flex;
    flex-direction: row-reverse; /* Only needed for swapping their order. */
    align-items: center;
}

input {
    background-color: blue;
}

label {
    background-color: red;
    flex-grow: 1; /* Grow the label to fill available space, pushing the checkboxes to the edge of the container. */
}