Why is there an unexplainable gap between the validation and the InputTextArea elements?

There seems to be a small gap between the InputTextArea and its validation. I've used F12 and there is no padding, margins ext. causing this gap. The normal InputText above it has no gaps at all but the area below does? I've attached the form the input elements are in and any CSS associated with it.

 <EditForm Model=product OnValidSubmit="HandleSubmit">
            @* the model is passed to HandleSubmit as part of the EditContext*@
            <DataAnnotationsValidator />

            <div class="formSegment">
                <h1 class="heading">Product Registration Form</h1>
                <p class="headingText">Please fill out this form with the required information</p>
            </div>

            <div class="formSegment">
                <h4>product Information</h4>

                <label for="NameInput">Name:</label>
                <InputText id="NameInput" @bind-Value="product.Name" maxlength="100"></InputText>
                <ValidationMessage For="@(() => product.Name)" />

                <label for="KeywordsInput">Keywords:</label>
                <InputText id="KeywordsInput" @bind-Value="product.Keywords" maxlength="3000" </InputText>
                <ValidationMessage For="@(() => product.Keywords)" />
                  
                <label for="DescriptionInput">Description:</label>
                <InputTextArea id="DescriptionInput" @bind-Value="product.Description" maxlength="3000"  rows="3"></InputTextArea>
                <ValidationMessage For="@(() => product.Description)" />

                

                <label for="AdditionalInformationInput">Additional Information:</label>
                <InputTextArea id="AdditionalInformationInput" @bind-Value="product.AdditionalInformation" maxlength="3000" rows="3"></InputTextArea>
                <ValidationMessage For="@(() => product.AdditionalInformation)" />
                                  
       
            <button type="submit" class="btn-primary">Add</button>
            <button type="submit" class="btn-secondary">Cancel</button>

        </EditForm>    



/*Section CSS*/
.heading {
   margin-bottom:0.35em;
    text-align: center;
}
    
.headingText {
    margin: 0.5em auto;
    text-align: center;
}
    
form {
    width: 60vw;
    max-width: 600px;
    min-width: 500px;
    margin: 0 auto;
    padding-bottom: 2em;
}
   

label {
    margin: 0.5rem 0;
    margin-bottom:auto
}
        
input {
    width: 100%;
    min-height: 2em;
}
  
textarea {
    width: 100%;
    min-height: 3em;
    max-height: 8em;
}


.formSegment {
    padding: 1rem 0;
    border-bottom: 3px solid #3b3b4f;
}
  
.formSegment:last-of-type {
    border-bottom: none;
}

It's to do with the space created for descenders (see article on more10.com). Note that firefox doesn't make space for the descender whereas Chrome does.

Inline display

Block display

Set textarea { display: block; } to remove it. Sample code below

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

textarea {
  width: 100%;
}

.block {
  display: block;
}

<!-- language: lang-html -->

<textarea></textarea> Sample Text - gap
<textarea class='block'></textarea> Sample Text - smaller gap

<!-- end snippet -->