Calcite label not vertically aligned when using with checkbox

EricErtl

I am using a Calcite label with a Calcite checkbox and when combined in a div with a button they do not vertically align (this is within the footer of a Calcite dialog).  I essentially want the div with the button and label to align with the align-items class but they do not.  I included some code and screenshot of the inspection of the label.

Appreciate the help in advance!

<div slot="footer-end" className="flex items-center space-x-4">
  <calcite-label layout="inline">
    <calcite-checkbox
      checked={dontShowAgain}
      onChange={(e) => setDontShowAgain(e.target.checked)}
    ></calcite-checkbox>
    Don't show this again
  </calcite-label>
  <calcite-button onClick={handleClose}>Close</calcite-button>
</div>

 

2025-10-27_14-26-45.png

EricErtl

I cannot upload my code but I did create a pen showing the issue using the footer-start and footer-end for the label and button respectively.