Check box overlapping with label - HTML, CSS [closed]

I am trying to create a 'ul' with multiple elements in each 'li'.

.dis {
  display: inline-block;
}

<ul>
  <li>
    <input class="dis" type="checkbox" value="name">
    <div class="dis">name</div>
    <input type="number" class="dis">
    <select class="dis" name="select-condition">
      <option value="<=">Less than or equal to</option>
      <option value="<">Less than</option>
      <option value=">=">Greater than or equal to</option>
      <option value=">">Greater than</option>
    </select>
  </li>
</ul>

In the output the checkbox is overlapping with the label like below,

How could I fix this?