\
**Category:** Dash Python\
**Created:** [May 5, 2021, 1:16pm UTC](https://community.plotly.com/t/vertically-alignment-of-html-div-elements/52693 "2021-05-05T13:16:28Z")\
**Posts on this page:** 6\
**Page:** 1
**Author:**  [@thleo](https://community.plotly.com/u/thleo)\
**Post date:** [May 5, 2021, 1:16pm UTC](https://community.plotly.com/t/vertically-alignment-of-html-div-elements/52693/1 "2021-05-05T13:16:28Z")
Hi,
I have the following simplified layout and my target is to have all the elements of the first Div vertically aligned.
```auto
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
html.H1('Evolution of World'),
html.Div([
html.Div([
html.Div(children='Select'),
dcc.Dropdown(
id='drop_world',
options={'label': 'America', 'value': 'America'},
multi=True,
value=''
)
], style={'display': 'inline-block', 'width': '20%', 'border': '2px green solid'}),
html.Div([
html.Div(children='Select'),
dcc.Dropdown(
id='drop_area',
options={'label': 'US', 'value': 'US'}, # List of {'label': , 'value': }
multi=True,
value=''
)
], style={'display': 'inline-block', 'width': '20%', 'margin-left': '15px', 'border': '2px green solid'}),
html.Div([
html.Div(children='Select Start and End Date'),
dcc.DatePickerRange(
id='date-picker-range',
display_format='DD/MM/YY',
first_day_of_week=1,
)
], style={'display': 'inline-block', 'width': '20%', 'margin-left': '15px', 'border': '2px green solid'}),
html.Div([
html.Div(children='See'),
html.Button('See Button', id='but-see', n_clicks=0, style={'verticalAlign': 'middle'}),
], style={'display': 'inline-block', 'margin-left': '15px', 'verticalAlign': 'middle', 'border': '2px green solid'}),
]),
html.P(),
html.Div([
html.Div(children='Results'),
dcc.Graph(id='my_graph',
figure={'data': [{'x': [1, 2], 'y': [3, 1]}],
'layout': {'title': 'Default Title'}
})
])
])
if __name__ == ' __main__':
app.run_server()
```
However, the datepickerrange and the button are a bit higher:
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [May 5, 2021, 1:27pm UTC](https://community.plotly.com/t/vertically-alignment-of-html-div-elements/52693/2 "2021-05-05T13:27:19Z")
Hi @thleo
I think some components have different margins defined.
To solve this I add styles to those components (one by one).
```auto
Style={‘margin-top’:10}
```
But I think that will align Horizontaly 🤔 🥴 😀
---
**Author:**  [@thleo](https://community.plotly.com/u/thleo)\
**Post date:** [May 5, 2021, 1:40pm UTC](https://community.plotly.com/t/vertically-alignment-of-html-div-elements/52693/3 "2021-05-05T13:40:48Z")
Hi @Eduardo,
I did changed the style to all the 4 Div elements to:
`style={'display': 'inline-block', 'width': '20%', 'border': '2px green solid', 'margin-top': '10'}`
but still it didn’t change anything.
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [May 5, 2021, 2:01pm UTC](https://community.plotly.com/t/vertically-alignment-of-html-div-elements/52693/4 "2021-05-05T14:01:52Z")
Hey @thleo
Margin-top will add spaces into the top margin of your component.
You only need to change the components margins that are not aligned.
In this case the date picker and the button.
Also 10 is a value reference, you may need to adjust the number of spaces manually, in one case perhaps you need 10 or 12 or 20 and in the other just 6 ot anything. Try any number until the component is aligned with the others.
---
**Author:**  [@thleo](https://community.plotly.com/u/thleo)\
**Post date:** [May 5, 2021, 2:27pm UTC](https://community.plotly.com/t/vertically-alignment-of-html-div-elements/52693/5 "2021-05-05T14:27:48Z")
OK, yes it worked like that. Thank you for the help.
In the end, I tried only `'verticalAlign': 'top'` to all the 4 elements and it worked better.
---
**Author:**  [@tphil10](https://community.plotly.com/u/tphil10)\
**Post date:** [May 6, 2021, 7:17pm UTC](https://community.plotly.com/t/vertically-alignment-of-html-div-elements/52693/6 "2021-05-06T19:17:00Z")
Hey @thleo ,
i spent some time styling mine in a similar fashion if it helps. The different size box was annoying me as well.
> [@Dash core component single date picker style](https://community.plotly.com/t/dash-core-component-single-date-picker-style/51573):
>
> I wanted to share some code in the case anyone was looking for it. The dcc.datepickersingle style didn’t match other components like dcc.Dropdown so i spent some time analyzing it and came up with this: .DateInput, .DateInput\_1 { border-radius: 4px 0 0 4px !important; } .DateInput\_input, .DateInput\_input\_1 { Height: 34px !important; Width: 100% !important; border-radius: inherit; } .SingleDatePickerInput\_\_withBorder { border-radius: 4px 0 0 4px; border: 1px solid #ccc…