lightning-input loses alignment on display of error/validation msges with other form elements

Question

Trying to make this work

<template>
    <p>This example creates a simple layout with field headers.</p>
    <lightning-layout vertical-align="end" class="slds-form">
        <lightning-layout-item padding="around-small" flexibility="auto">
            <lightning-input type="text" label="Test" placeholder="Enter text" variant="label-hidden" required>
            </lightning-input>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small" flexibility="auto">
            <lightning-button variant="brand" title="Click to retrieve fields" label="Enter"></lightning-button>
        </lightning-layout-item>
    </lightning-layout>
</template>

It works fine when there are no error msges on the input element. But loses the alignment when validation msges show up. Is. there any way to dynamically add padding to button element so it matches the alignment with the input element.

Answer 1

Removing vertical-align worked for me. Thanks to the comment from @YsrShk.

<template>
        <lightning-layout class="slds-form slds-size_3-of-3 ">
            <lightning-layout-item flexibility="auto" padding="around-small">
                 <lightning-input type="text" label="Test" placeholder="Enter text" variant="label-hidden" required>
                 </lightning-input>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <lightning-button variant="brand" title="Click to retrieve fields" label="Enter"></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
</template>