.button {
  display: inline-flex;
}

/* 
  Too greedy!

  Unfortunately, this still targets the <span class="visuallyHidden"> element.
*/
.greedy .button > * + * {
  margin-inline-start: 0.5rem;
}




/* 
  Better, but doesn't apply if children are hidden via other CSS classes, or HTML attributes.

  What if a child is hidden via the [hidden] attribute?
    - UA doesn't render it, so margin won't apply.
  What if a child is invisible because a custom element didn't provide a default <slot>?
    - Similar to [hidden], the element isn't rendered, so margin doesn't get applied.
  What if a child is invisible by means of externally defined CSS?
    - There's no way to know every CSS class that does this, so we can't use explicit
      :not(.className) selectors in this scenario.  We need a way to programmatically 
      check the conditions in JS rather than explicitly overriding edge cases in CSS.
*/
.better .button > *:not(.visuallyHidden) + *:not(.visuallyHidden) {
  margin-inline-start: 0.5rem;
}




/* 
  Just right!

  The definition of "visible" can be fine tuned (maybe even configurable) via JS to address 
  different scenarios, but the CSS remains short and sweet.
*/
.best .button > :visible + :visible {
  margin-inline-start: 0.5rem;
}































/* PEN ONLY */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
.icon {
  background-color: currentColor;
  display: inline-block;
  height: 1em;
  width: 1em;
}
.button {
  align-items: center;
  background-color: #009aff;
  border-radius: 2px;
  border: 1px solid navy;
  color: #006;
  height: 2rem;
  padding: 0.25rem 0.75rem;
  margin: 0;
  font: inherit;
}
.visuallyHidden {
  /* remove borders and shadows */
  border: none;
  box-shadow: none;
  outline: none;

  /* remove from normal document flow */
  position: absolute;
  z-index: -9999;

  /* render fg and bg invisible */
  background-color: transparent;
  color: transparent;
  text-shadow: transparent;

  /* shrink as small as possible and avoid interference with sibling element layout */
  height: 1px;
  margin: -1px;
  overflow: hidden;
  width: 1px;
}