dash bootstrap components not showing columns side by side

Question

I'm using dash bootstrap component library to layout my dashboard. However the columns don't display properly when I'm using controls inside them.

Here is the code that I have for the app_layout

sidebar = html.Div(
                    id="sidebar-inner-div",
                    children=[
                        html.H6("MENU"),
                        html.Hr(),
                        dbc.Nav(
                            [
                                dbc.NavLink("Page 1", href="/", active="exact"),
                                dbc.NavLink("Page 2", href="/page-2", active="exact"),
                                dbc.NavLink("Page 3", href="/page-3", active="exact"),
                            ],
                            vertical=True,
                            pills=True,
                            style={"display": "block"},
                        ),
                    ],
            )

app.layout = html.Div([
    dcc.Location(id="url"),
    dbc.Row(id="main", children=[
        dbc.Col(id="sidebar", children=[ sidebar ], width=2),
        dbc.Col([
            dbc.Row([
                html.H1("Tetris: HR Dashboard", id="dashboard-title", className="display-4"),
            ]),
            dbc.Row(
                id="controls", children=[
                dbc.Col([
                    dcc.DatePickerRange(
                        id="date_picker",
                        min_date_allowed=date(2020 , 9, 1),
                        max_date_allowed=(date.today() - timedelta(days=1)),
                        start_date=date(2020 , 9, 1),
                        end_date=(date.today() - timedelta(days=1)),
                    ),
                ], width=4),
                dbc.Col([
                    html.Div([
                        dcc.Dropdown(
                            id="year_dropdown",
                            options=[
                                {"label": "All", "value": "All"},
                                *[{"label": year, "value": year } for year in -np.sort(-df["Date"].dt.year.unique())],
                            ],
                            placeholder="Quick Select Year",
                        ),
                    ], className="dash-bootstrap"),
                ], width=4),
            ]),
        ], width=10),
    ]),
])

className dash-bootstrap is simply making the dropdown adapt to dark theme. It didn't affect the result in any way.

Here is how it looks on the page

I want the Date picker and Dropdown controls to go side by side.