How to properly align custom components when they are used as RadioItem labels

I am trying to create a radio items list with custom components for each radio item label. I've read and tried to implement the 'Components as Option Labels' example here but my labels are not aligned nicely (see image below). Notice how the radio button is not correctly aligned with the dropdown, input field, and button. It seems the dropdown, the input, and the button are all aligned by their centerline, but the radio button is above. How can I fix this?

Below is the code I've used.

from dash import Dash, html, dcc

app = Dash(__name__)

app.layout = html.Div(
    id='test-main-div',
    children=[
        html.Div(
            id='test-left-panel',
            children=[
                html.P('Will show some data here based on radio item selection')
            ],
        ),
        html.Div(
            id='test-radio-items-container',
            children=[
                dcc.RadioItems(
                    options=[
                        {
                            "label": html.Div(
                                className='test-single-key-container',
                                children=[
                                    dcc.Dropdown(
                                        className='city-name-dropdown',
                                        options=['New York City', 'Montreal', 'San Francisco'],
                                        value='Montreal',
                                    ),
                                    dcc.Input(
                                        id="key-level-input", type="number", placeholder="input with range",
                                        min=10, max=100, step=3,
                                    ),
                                    html.Button('X', id='delete-key-button', n_clicks=0),
                                ],
                            ),
                            "value": 'One',
                        },
                        {
                            "label": html.Div(
                                className='test-single-key-container',
                                children=[
                                    dcc.Dropdown(
                                        className='city-name-dropdown',
                                        options=['Boston', 'Maine', 'Florida'],
                                        value='Boston',
                                        style={
                                            'margin': '0px',
                                            'padding': '0px',
                                        },
                                    ),
                                    dcc.Input(
                                        id="key-level-input", type="number", placeholder="input with range",
                                        min=10, max=100, step=3,
                                        style={
                                            'margin': '0px',
                                            'padding': '0px',
                                        },
                                    ),
                                    html.Button(
                                        children='X',
                                        id='delete-key-button',
                                        n_clicks=0,
                                        style={
                                            'margin': '0px',
                                            'padding': '0px',
                                        },
                                    ),
                                ],
                            ),
                            "value": 'Two',
                        }
                    ],
                    value='One',
                    style={
                        'display': 'block',
                    }
                )
            ],
        ),
    ]
)


if __name__ == '__main__':
    app.run_server(debug=True)

And a stylesheet mostly just for structure - I want to eventually add more components and I've read many comments on this site suggesting that a separate stylesheet is best practice.

#test-left-panel {
    width: 50%;
    float: left;
}

#test-radio-items-container {
    margin-left: 50%;
}

.test-single-key-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0px;
}