# How to align dcc dropdown and dbc input

**URL:** <https://community.plotly.com/t/how-to-align-dcc-dropdown-and-dbc-input/55268>\
**Category:** Dash Python\
**Created:** [August 3, 2021, 8:49pm UTC](https://community.plotly.com/t/how-to-align-dcc-dropdown-and-dbc-input/55268 "2021-08-03T20:49:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![UdayGuntupalli](https://avatars.discourse-cdn.com/v4/letter/u/a9adbd/32.png) [@UdayGuntupalli](https://community.plotly.com/u/UdayGuntupalli)\
**Post date:** [August 3, 2021, 8:49pm UTC](https://community.plotly.com/t/how-to-align-dcc-dropdown-and-dbc-input/55268/1 "2021-08-03T20:49:31Z")

</div>

All,  
I am trying to figure out why a dcc dropdown and dbc input component don’t align in my dash app. I have tried several different things, but could not figure out why this happens. Any help/guidance is appreciated. Here is an example code to re-create the issue.

```python
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

# App Layout
app = dash.Dash(
    __name__ ,
    meta_tags=[{'name': 'viewport', 'content': 'width=device-width'}],
)
app.title = "Dash App"
server = app.server

PERCENTILES = [x for x in range(0, 100) if x % 5 == 0]
PERCENTILES.append(99)

app.layout = html.Div(
    [
        dbc.Form(
            [
                dbc.FormGroup(
                    [
                        dbc.Label("Percentiles:", className="control_label"),
                        dcc.Dropdown(
                            options=[{'label': str(x), 'value': x} for x in PERCENTILES],
                            multi=True,
                            className="dcc_control",
                            style={'display': 'inline-block', "background-color": "#1f5869",
                                   "color": "#cbe2e2",
                                   "width": "100%"},
                        ),
                    ],
                    style={'display': 'inline-block', "marginLeft": "35px", "marginRight": "35px",
                           "width": "200px", },
                ),
                dbc.FormGroup(
                    [
                        dbc.Label("Height:", className="control_label"),
                        dbc.Input(
                            type="number",
                            placeholder="-18.87",
                            style={"width": "200px", "height": "25px", "color": "#cbe2e2"},
                        ),
                    ],
                    style={'display': 'inline-block', "marginLeft": "35px", "marginRight": "35px"},
                ),
                dbc.FormGroup(
                    [
                        dbc.Label("Age:", className="control_label"),
                        dbc.Input(
                            type="number",
                            placeholder="-18.87",
                            style={"width": "200px", "height": "25px", "color": "#cbe2e2"},
                        ),
                    ],
                    style={'display': 'inline-block', "marginLeft": "35px", "marginRight": "35px"},
                ),
            ]),
    ])

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

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f8bc167d351924bdc7fd62bdd6ec9b5c846741f9.png)

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [August 4, 2021, 1:36am UTC](https://community.plotly.com/t/how-to-align-dcc-dropdown-and-dbc-input/55268/2 "2021-08-04T01:36:59Z")

</div>

Hi @UdayGuntupalli

I added ‘float’: ‘left’ to each of the components and this is the result:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/5/50461074ecfff88c23935f9c377e7e26bdcc006a.png)

I also change the dbc.Label outside the dbc.FormGroup and add it a style. Here is the code:

```auto
# App Layout
app = dash.Dash(
    __name__ ,
    meta_tags=[{'name': 'viewport', 'content': 'width=device-width'}],
)
app.title = "Dash App"
server = app.server

PERCENTILES = [x for x in range(0, 100) if x % 5 == 0]
PERCENTILES.append(99)

app.layout = html.Div(
    [
        dbc.Form(
            [
                dbc.Label("Percentiles:", className="control_label", style={'display': 'block'}),
                dbc.FormGroup(
                    [
                        
                        dcc.Dropdown(
                            options=[{'label': str(x), 'value': x} for x in PERCENTILES],
                            multi=True,
                            className="dcc_control",
                            style={'display': 'inline-block', "background-color": "#1f5869",
                                   "color": "#cbe2e2",
                                   "width": "100%"},
                        ),
                    ],
                    style={'display': 'inline-block', 'float':'left', "marginLeft": "35px", "marginRight": "35px",
                           "width": "200px", },
                ),
                dbc.FormGroup(
                    [
                        dbc.Label("Height:", className="control_label"),
                        dbc.Input(
                            type="number",
                            placeholder="-18.87",
                            style={"width": "200px", "height": "25px", "color": "#cbe2e2"},
                        ),
                    ],
                    style={'display': 'inline-block', 'float':'left', "marginLeft": "35px", "marginRight": "35px"},
                ),
                dbc.FormGroup(
                    [
                        dbc.Label("Age:", className="control_label"),
                        dbc.Input(
                            type="number",
                            placeholder="-18.87",
                            style={"width": "200px", "height": "25px", "color": "#cbe2e2"},
                        ),
                    ],
                    style={'display': 'inline-block', 'float':'left', "marginLeft": "35px", "marginRight": "35px"},
                ),
            ]),
    ])

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

```