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>

[KittyHurley]

@EricErtl This looks to be a result of trying to fit in the Label/Checkbox and Button into the same slot. Can you add the different functionalities to their own slots, such as "footer-start" and "footer-end"?

<div slot="footer-start">
  <calcite-label layout="inline">
    <calcite-checkbox></calcite-checkbox>
      Don't show this dialog again
    </calcite-label>
</div>

<calcite-button slot="footer-end">Close</calcite-button>

[EricErtl]

Hi @KittyHurley. Thank you for the response!  Unfortunately that didn't seem to change the behavior.  I tried using just the label and button with slots and also included the label in a div with a slot.  Both had the same result.

<div slot="footer-start">
  <calcite-label layout="inline">
    <calcite-checkbox
      checked={dontShowAgain}
      oncalciteCheckboxChange={handleCheckboxChange}
    ></calcite-checkbox>
    Don't show this again
  </calcite-label>
</div>
<calcite-button slot="footer-end" onClick={handleClose}>
  Close
</calcite-button>

Also just the calcite components...

<calcite-label slot="footer-start" layout="inline">
  <calcite-checkbox
    checked={dontShowAgain}
    oncalciteCheckboxChange={handleCheckboxChange}
  ></calcite-checkbox>
  Don't show this again
</calcite-label>

[KittyHurley]

Can you share an isolated case via Codepen? Wondering if there is some conflicting CSS that may be causing the issue. Here are a few templates:

• Codepen
• Stackblitz (React)
• JS Bin (with Maps SDK for JS)

[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.  

[KittyHurley]

Thanks for the above example! To accommodate with Label and Switch you can use Label's "--calcite-label-margin-bottom" CSS variable:

<style>
#footer-start-switch {
  --calcite-label-margin-bottom: 0;
}
</style>

<div id="footer-start-content" slot="footer-start">
  <calcite-label id="footer-start-switch" scale="l" layout="inline">
    <calcite-switch checked></calcite-switch>
    Don't show this again
  </calcite-label>
</div>