css3 - Material design input - bug in focus effect -

i looking material design input tutorial - found here -, when tried apply in code, underlines don't match up. underline when focused shorter regular border-bottom.

here's live example of mean: codepen

and here's code:

input {    font-size: 18px;    padding: 10px 10px 10px 5px;    display: block;    width: 300px;    border: none;    border-bottom: 1px solid #757575;  }  .bar {    position: relative;    display: block;    width: 300px;  }  .bar:before,  .bar:after {    content: '';    height: 2px;    width: 0;    bottom: 1px;    position: absolute;    background: rgba(37, 116, 169, 0.50);    transition: 0.2s ease all;  }  .bar:before {    left: 50%;  }  .bar:after {    right: 50%;  }  /* active state */    input:focus ~ .bar:before,  input:focus ~ .bar:after {    width: 50%;  }

<form>    <div class="group">      <input type="text" required>      <span class="bar"></span>      <label>name</label>    </div>      <div class="group">      <input type="text" required>      <span class="bar"></span>      <label>email</label>    </div>  </form>

is there knows why happens?

you need set box-sizing:border-box; on input elements:

input {    font-size: 18px;    padding: 10px 10px 10px 5px;    display: block;    width: 300px;    border: none;    border-bottom: 1px solid #757575;    box-sizing:border-box;    outline:none;  }  .bar {    position: relative;    display: block;    width: 300px;  }  .bar:before,  .bar:after {    content: '';    height: 2px;    width: 0;    bottom: 1px;    position: absolute;    background: rgba(37, 116, 169, 0.50);    transition: 0.2s ease all;  }  .bar:before {    left: 50%;  }  .bar:after {    right: 50%;  }  /* active state */    input:focus ~ .bar:before,  input:focus ~ .bar:after {    width: 50%;  }

<form>    <div class="group">      <input type="text" required>      <span class="bar"></span>      <label>name</label>    </div>      <div class="group">      <input type="text" required>      <span class="bar"></span>      <label>email</label>    </div>  </form>

that, or set width of spans 315px should match width of inputs when factor in border , padding.