[Modal]: Input fields and label incorrectly aligned

When using input fields inside a modal they aren’t aligned properly:

<a class="waves-effect waves-light btn" data-login>Login</a>

    <div id="modal1" class="modal">
        <div class="modal-content">
            <h4>Login</h4>

            <div class="row">
                <div>
                    <input value="Alvin" id="first_name2" type="text">
                    <label class="active" for="first_name2">Username:</label>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
    </div>

I am using meteor, and the button click event is registered in the following way:

'click [data-login]': (event: Event, template: Template) => {
    $('#modal1').openModal();

}

[Aranir]

I tested it in different conditions at it appears it has to do with meteors template rendering in combination with the nav bar.

If I have the button (to display the navbar) inside a navbar and the modal from a different template, the alignment seems to be incorrect:

//layout.html

<template name="layout">

    <nav>
        <div class="nav-wrapper">
            <a href="#" class="brand-logo">Pay Me Back</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li>
                    <div class="row col s4">
                        {{> loginTemplate}}

                    </div>
                </li>
            </ul>
        </div>
    </nav>
    </div>
</template>

//loginTemplate.html

<template name="loginTemplate">
    <!-- Modal Button -->
        <a class="waves-effect waves-light btn" data-login>Login</a>

    <!-- Modal Structure -->
    <div id="modal1" class="modal">
        <div class="modal-content">
            <h4>Login</h4>

            <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 class="active" 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>
                </form>
            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
    </div>
</template>

If instead the modal definition is inside the layout.html it works correctly.

Therefore I assume it has something to do with rendering templates and the navbar, as if I use the same template (including the modal definition) outside the navbar it displays everything in the correct way.

[fega]

@Zerebokep please provide a codepen illustrating the problem