CSS issue, text and checkbox not aligned

Question

I have an css style issue where textbox and the text are not alligned. Below is my code. I need help to fix this.

Thanks

<div>
                                <input
                                    type="checkbox"
                                    [checked]="section?.data?.allowMe"
                                    class="pointer-events-none"
                                />
                                <label class="ml-2 view-text" for="allMe"
                                    >Allow LostOfData to be Seen</label
                                >
                            </div>

Answer 1

Use flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/):

div {
    display: flex;
    align-items: center;
}