Alignment issue between lightning-input fields in lwc

Question

The problem is that there is a huge space between the datetime input field and the text field. How do i fix it? I have used slds-size and also css width property.But none of that works

What should I do to fix it?

I have used slds-grid for the input fields. The 2nd row code is as follows

<div class="slds-grid slds-gutters">

            <div class="slds-col slds-m-left_small">

                <label for="rcdt"><div class="required-field">Receiving Date Time</div></label>

                <lightning-input id="rcdt" variant="label-hidden" type="datetime"></lightning-input>

              </div>



            <div class="slds-col">

                <label for="delnoid">Delivery Note Number</label>

                <lightning-input type="text" variant="label-hidden" id="delnoid"></lightning-input>

            </div>

         

            <div class="slds-col slds-m-right_small">

                <label for="notesid">Notes</label>

                <lightning-input type="text" variant="label-hidden" id="notesid"></lightning-input>

            </div>  

        </div>

Answer 1

Try this out

<template>
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-3">
            <label for="rcdt"><div class="required-field">Receiving Date Time</div></label>
            <lightning-input id="rcdt" label="a" variant="label-hidden" type="datetime"></lightning-input>
        </div>
        <div class="slds-col slds-size_1-of-3 slds-p-right_medium">
            <label for="delnoid">Delivery Note Number</label>
            <lightning-input type="text" label="a" variant="label-hidden" id="delnoid"></lightning-input>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <label for="notesid">Notes</label>
            <lightning-input type="text" label="a" variant="label-hidden" id="notesid"></lightning-input>
        </div>
    </div>
</template>