textFit | free component | Data Manipulation library

I am using react-textfit to automatically scale text to fit to a div of a specific width and height (which is a percentage of the window). The font I'm using has a massive descender (whitespace at the bottom). At a result, trying to center other elements inline with this text is difficult. Since the size of this text will change based on the screen size, I cannot manually change the line-height to fix this. Furthermore, using a variable line-height does not work, as the font is not centered around the text.

For example, in this image, you can see how there is significant whitespace below the character.

A variable line height (70%) does not help either, since the whitespace at the bottom is treated as it is apart of the character itself. Thus, the character is not vertically centered within the div, which is the intended outcome. Manually setting a line height with a pixel value also fails in the same way.

Because the character has whitespace below it, inline elements that should be centered vertically alongside the text is instead shifted down.

The title, alongside the included inline elements are wrapped in the following div:

I want to use an element which is selected via vanilla JavaScript (prepareCaption) with jQuery method like .css... is this posibble?

This one is a head scratcher for me. Maybe I am not seeing something in the Vue lifecycle that I should be taking into account. I'll try to make this as simple as possible.

I have a custom button component that is being sized by a flex grid container. The grid looks something like this:

I created a sunburst diagram based on this JSON file. (existing quetions considered)

The first few lines look like this: