Dynamic CSS line-height

Panel
1

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

pn.extension(sizing_mode='stretch_both')

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

text = pn.widgets.StaticText(value='sample',styles=css_styles,
                             width=100,min_height=45)

text.jscallback(height='''
    const height = text.height
    text.styles['line-height'] = height.toString().concat("px")
    text.styles['font-size'] = Math.round(height/3).toString().concat("px")
                ''',args={'text':text})

pn.Column(text).save('CSS_question.html')

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