moving a check box in html list and moving it

Question

Really simple guys: making a collapsible list in html and css and trying to move the checkbox that controls the drop down to the FRONT of the text, as well as get rid of the dot to list the items. Right now the checkbox is placed at the end of the text. I tried to simply switch the order of the html but that screws up the drop down action.

Here is the fiddle: https://jsfiddle.net/gyetxsLu/

HTML:

<div class="CHECKBOXMENU">
<ul class="collapsibleList">
 <li>
  <label for="mylist-node1">Click to open list 1</label>
  <input type="checkbox" id="mylist-node1" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
 <li>
  <label for="mylist-node2">Click to open list 2 with subfolders</label>
  <input type="checkbox" id="mylist-node2" />
  <ul>
   <li>
  <label for="mylist-node3">Click to expand</label>
  <input type="checkbox" id="mylist-node3" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
</ul>
</div>

CSS:

.collapsibleList li > input + * {
 display: none;
}

.collapsibleList li > input:checked + * {
 display: block;
}

.collapsibleList label {
 cursor: pointer;
}

Answer 1

No need to restructure the HTML. float: left the required checkboxes and remove the bullets using list-style-type: none

ul.collapsibleList,
ul.collapsibleList ul {
  list-style-type: none;
}
#mylist-node1,
#mylist-node2,
#mylist-node3 {
  float: left;
  margin-right: 5px;
}

JSfiddle