Bootswatch Paper Theme with Floating Labels (Flex) with AngularJS

I am using this JSFiddle as a base and trying to make it work for my needs. The base model worked, but the help-block is not where it is suppose to be, and does not seem to work with multiple fields. Here is my modified JSFiddle (I added more fields). Only the top two input fields seem to function properly, and the help-block is still not in the right place. What seems to be the issue? and on a side note, how can the JS be made into a directive? HTML: <div class="col-xs-12"> <div class="form-group col-xs-12 col-sm-6"> <label class="control-label">Last Name</label> <input type="text" class="form-control input-lg" /> <span class="help-block">Help Block</span> </div> <div class="form-group col-xs-12 col-sm-6"> <label class="control-label">First Name</label> <input type="text" class="form-control input-lg" /> <span class="help-block">Help Block</span> </div> <div class="form-group col-xs-12 col-sm-6"> <label class="control-label">Email</label> <input type="email" class="form-control input-lg" /> <span class="help-block">Help Block</span> </div> <div class="form-group col-xs-12 col-sm-6"> <label class="control-label">Number</label> <input type="number" class="form-control input-lg" /> <span class="help-block">Help Block</span> </div> <div class="form-group col-xs-12"> <label class="control-label">Message</label> <textarea rows="5" class="form-control input-lg"></textarea> <span class="help-block">Help Block</span> </div> </div> CSS: .form-group { display: flex; height: 55px; } .control-label { font-size: 16px; font-weight: 400; opacity: 0.4; pointer-events: none; position: absolute; transform: translate3d(0, 22px, 0) scale(1); transform-origin: left top; transition: 240ms; } .form-group.focused .control-label { opacity: 1; transform: scale(0.75); } .form-control { align-self: flex-end; } .form-control::-webkit-input-placeholder { color: transparent; transition: 240ms; } .form-control:focus::-webkit-input-placeholder { transition: none; } .form-group.focused .form-control::-webkit-input-placeholder { color: #bbb; } JS: $('.form-control').on('focus blur', function(e) { $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0)); }).trigger('blur');