Why don't the label and input elements on the List Item show up at the same time?

It's all clear now with the snapshot. Let's take a look at the last bit of the CSS file:

/* Edit Task */
ul li input[type=text] {
  display:none;
}

ul li.editMode input[type=text] {
  display:block;
}

ul li.editMode label {
  display:none;
}

The first rule says that input fields are not shown, but the second rule says they are IF they are in a list item that has the class editMode. Now labels are shown by default, but the third rule says they are not shown if they are in a list item with the class editMode. So, by design, only one will appear at a time based on whether the list item they belong to has that class or not.

Then, when you consider that the JavaScript code copies the label text into the input field when you turn on edit mode, and copies anything you put into the input field back to the label when you turn off edit mode, you have a clever way to edit what's in a label when you need to, but put it back to the label when you are done. So when you're not editing, the label has no edit box around it and cannot be changed accidentally.

This is obviously the intended functionality, implemented by a combination of CSS and JavaScript.

Does it make sense now?