materializecss behaving wiered

I am learning materialize css and following the documentation of adding forms. But the text fields are having overlapped texts. Here is the documentation http://materializecss.com/forms.html

this is my attempt at it: https://jsfiddle.net/dsfjodjb/

<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<title></title>
</head>
<body>
  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">Last Name</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input disabled value="I am not editable" id="disabled" type="text" class="validate">
          <label for="disabled">Disabled</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate">
          <label for="password">Password</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          This is an inline input field:
          <div class="input-field inline">
            <input id="email" type="email" class="validate">
            <label for="email" data-error="wrong" data-success="right">Email</label>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

<script type="text/javascript">

  $(document).ready(function() {
  Materialize.updateTextFields();
});
</script> 
</html>

Solution

The label and placeholder are overlapping because you havent added the class "active" to the label. The class is responsible for transforming the text on top of input element(transform: translateY(-140%);).Inspect the element on materialise css website for more details of the class. Let me know in comments if this doesnt help you. Please find working js fiddle for the same here : https://jsfiddle.net/dsfjodjb/3/

 <div class="input-field col s6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name" class="active">First Name</label>
 </div>