Salesforce LWC: How to remove blank line after buttons

Question

I have a LWC where there is a blank line after the buttons. How is this happening? I don't see how when I look at the HTML.

The LWC looks like this, with the blank line highlighted in yellow.

The HTML is;

<template>
    <div class="c-container">
        <lightning-layout class=slds-is-relative multiple-rows="true" >
            <lightning-layout-item
                    flexibility="grow"
                    class="slds-is-relative slds-m-bottom_small_small slds-scrollable_y">
                <div class="page-section page-header">
                    <lightning-card>
                        <h3 slot="title">
                            <div if:true={editable} slot="footer"> 
                                <template if:true={showABC}>

                                    <lightning-button style="font-weight:normal;font-size:13px" 
                                       label="abc" title="abc"       
                                       onclick={handleCreateABC}
                                       class="slds-m-left_x-small"></lightning-button>
                                    
                                </template>

                            </div>

                            <div if:false={editable} slot="footer">
                                Order History
                            </div>
                        </h3>

                        <div style="height: 170px;">
                            <div if:true={error}>
                                <p>{errorString}</p>
                            </div>
                            <div if:false={error}>
                                <lightning-datatable
                                        data={orderHistories}
                                        columns={columns}
                                        hide-checkbox-column
                                        key-field="id"
                                        default-sort-direction={defaultSortDirection}
                                        sorted-direction={sortDirection}
                                        sorted-by={sortedBy}
                                        onsort={onHandleSort}>
                                </lightning-datatable>
                            </div>
                        </div>
                    </lightning-card>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>

I've been reading and the BR element adds a blank line but I don't use this. I don't know where the blank line is coming from.