Any object wrapped in this component stops affecting line-height

NotAffectingLineHeightObject.module.css

.root {
  display: inline-flex;
}

.object {
  display: inline-grid;
  grid-template-rows: 0;
  align-items: center;
  align-self: center;
}

.aligner {
  visibility: hidden;
  margin-left: -1ex;
}

NotAffectingLineHeightObject.tsx

import { type ReactNode } from "react";

import styles from "./NotAffectingLineHeightObject.module.css";

type Props = {
  children: ReactNode;
};

export function NotAffectingLineHeightObject({ children }: Props) {
  return (
    <span className={styles.root}>
      {/* this character makes is so that children are aligned to baseline by default */}
      <span className={styles.aligner} aria-hidden="true">
        x
      </span>
      <span className={styles.object}>{children}</span>
    </span>
  );
}