why I'm getting this behaviour?

label{margin-bottom:.5em}

   <form>
         <div class="first-row">
             <div class="field">
                <label for="firstname">First Name <sup>*</sup</label>
                <input type="text" id="firstname" name="firstname">
             </div>
             <div class="field">
                <label for="lasttname">Last Name <sup>*</sup </label>
                <input type="text" id="lasttname" name="lasttname">
             </div>
         </div>

         <label for="email">Email Adress <sup>*</sup></label>
         <input type="email" name="email" id="email" />

        </form>