Dynamic CSS line-height

Hello all, I have been using the CSS attribute line-height to vertically center my StaticText widgets. This works great if the height is fixed, but if there is room to stretch the height of the widget I want to be able to update the line-height and font-size to keep the text centered and appropriately fill the text area. Below is my unsuccessful attempt at achieving this so I was curious if any of you had any ideas?

import panel as pn


css_styles = {'border':'solid',
              'line-height': '45px',
              'font-size': '15px'}

text = pn.widgets.StaticText(value='sample',styles=css_styles,

    const height = text.height
    text.styles['line-height'] = height.toString().concat("px")
    text.styles['font-size'] = Math.round(height/3).toString().concat("px")


If the widget height equals the line-height then the text is centered, but as the height changes I need the line-height to change too.
image image