Setting dash-daq graph height in Python Dash Bootstrap Components

I’m new to Dashboard Development using Python Plotly and Dash. Also I have no background in CSS or html. I’m trying to build a dashboard to show live and past data from a database in a dashboard. The data is fed by sensors attached to a raspi. I’m using Dash with bootstrap components to achieve a structure as shown below. I figured out to use Bootstrap Cards in columns as a container for each graph. As I don’t like the looks of the go.Indicator Gauge Charts I tried using the dash daq one, which have their own problems with range, colors, missing labels etc.

The biggest problem I run into is that I’m not able to fit a gauge chart in a dbc.Card using percentage heights.

My code looks as follows:

                            color={"gradient":True ,"ranges":{"#ff0001": [0, 15], "ffff01":[15, 21], "green": [21, 22], "yellow" : [22,26], "#FF0000": [26,30] }},
                            showCurrentValue = True,
                            scale={'interval': 2, 'labelInterval': 2},
                            style = {
                                     "height" : "80%"
                )], style = {"height" : "50%"})
        ], className="border", style = {"height" : "50vh"})], style={"height": "100vh"})

the last style dict comming from the main div. No matter what I am trying to change it always give me the following output somehow.

How can I adjust the height in relation to the dbc card it is contained in and center it in the card?

Targeted design:

Many thanks in advance