Reducing the space between two layout components

Dash Python
1

As can be seen from the screenshot there is a huge space between dropdown and button.
I want this button to be next to the dropdown. I tried styling but I ain’t to reduce this huge space.

How to solve this problem?

Screenshot:

enter image description here

Code:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL
import dash_bootstrap_components as dbc


app = dash.Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div([
    html.Button("Add Filter", id="dynamic-add-filter", n_clicks=0),
    html.Div(id='dynamic-dropdown-container', children=[]),
])

@app.callback(
    Output('dynamic-dropdown-container', 'children'),
    [Input('dynamic-add-filter', 'n_clicks')],
    [State('dynamic-dropdown-container', 'children')])
def display_dropdowns(n_clicks, children):
    new_element = html.Div([
        dcc.Dropdown(
            id={
                'type': 'dynamic-dropdown',
                'index': n_clicks
            },
            options=[{'label': i, 'value': i} for i in ['NYC', 'MTL', 'LA', 'TOKYO']],
            style=dict(
                    width='40%',
                    # verticalAlign="middle"
                    # display='flex',
                    float="left",
                )
        ),
        html.Button('Button 1', id='btn-nclicks-1', n_clicks=0, style={'margin-right': '35em'}),


        html.Div(
            id={
                'type': 'dynamic-output',
                'index': n_clicks
            }
        )
    ])
    children.append(new_element)
    return children


@app.callback(
    Output({'type': 'dynamic-output', 'index': MATCH}, 'children'),
    [Input({'type': 'dynamic-dropdown', 'index': MATCH}, 'value')],
    [State({'type': 'dynamic-dropdown', 'index': MATCH}, 'id')],
)
def display_output(value, id):

    return  html.Div(children=[html.Div([
    html.Div('Dropdown {} = {}'.format(id['index'], value)),
    # html.Button('Button 1', id='btn-nclicks-1', n_clicks=0,  style={'float': 'right'}),
    ])
    ])


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

Hi @nkx
Try using the code below. I hope it’ll work. Any other help you need then please ask.
Style is also working properly. you just need to specify how exactly you want to style them.

    new_element = html.Div([
        dcc.Dropdown(
            id={
                'type': 'dynamic-dropdown',
                'index': n_clicks
            },
            options=[{'label': i, 'value': i} for i in ['NYC', 'MTL', 'LA', 'TOKYO']],
            style=dict(
                    width='40%',
                )
        ),
        html.Button('Button 1', id='btn-nclicks-1', n_clicks=0, style={'width':'10%'}),


        html.Div(
            id={
                'type': 'dynamic-output',
                'index': n_clicks
            },
            style = {'margin-left': '35em', 'width': '50%'}
        )
    ], style={'align-items': 'center', 'border': '1px solid black', 'display': 'flex', 'justify-content': 'center'})
3

Will check it today.

4

didn;t work in my case/