'how to place two components side by side inside same html.Div()?

I place dbc.Label() and dcc.RadioItems() inside one html.Div() and I'd like to place these Label and RadioItems() side by side.

I did below and it didn't work, dbc.Label and dcc.RadioItems are on different rows. Thanks for help.


        crossplot_radio_items = html.Div(
            [
            dbc.Label('Choose Pads',style={'display': 'inline-block'}),
            dbc.RadioItems(
            options=[
                {"label": "AllPads", "value": "AllPads"},
                {"label": "Pad74", "value": "74"},
                {"label": "Pad75", "value": "75"},
                {"label": "Pad77", "value": "77"},
                {"label": "Pad78", "value": "78"},
            ],
            value="AllPads",  
            id="conformance-crossplot-radio-items",
            labelCheckedClassName="label-radio-checked",
            inputClassName="label-radio-input",
            inline=True,
                        ),
            style={'display': 'inline-block'}
            ],
        )

enter image description here



Solution 1:[1]

Style goes outside children..

children=[], style={'display': 'flex'}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Berg