Black Lives Matter. Please consider donating to Black Girls Code today.

Control Number of Columns Inside Tabs

I have different number of tabs as shown. In my particular tab (Summary Overview), I want to have 2 columns for the words: Summary Overview of Punggol Consumption (1st column), Time Step: Daily, Hourly (2nd column, on the same row), follow by a plot on the new next row, but occupy the whole column. Can I know how to achieve this?

See printscreen here https://i.imgur.com/FxzkHoL.png. The top part is the original one, and I want to achieve the bottom one.

I have tried style={‘columnCount’: 2} but it is messing things up, and maybe I insert at the wrong place.
Also, I want to control at the Python script level, not at CSS level, which I find confusing, and also different tabs have different needs.

Thanks.

Do you mean placing them side by side? Have you tried the code below?

html.Div([
        html.Div([
            ...
        ], className="six columns"),

        html.Div([
            ...
        ], className="six columns"),
    ], className="row")
])

Thanks Caiyij for your reply. Fantastic, it works. See https://i.imgur.com/vYmcJiR.png
Is it possible to have the Time Step Hourly Daily in a single line also?

Of course, you can adjust the width of those component. For example six columns for title, two columns for "Time Step"m and four columns for the RadioItems (Hourly Daily).

thank you.:grinning: