font size and width control of datepickerrange

Question

how to make start date and end date appear at one line for datepickerrange component.

for example, mine is the first figure, but i want it look like 2nd figure.

here is my code:

html.H4('Select a start and end date:'),
dcc.DatePickerRange(id='date-range',
                   min_date_allowed=datetime(2020,1,1),
                   max_date_allowed=datetime.today(),
                   start_date=start_date, 
                   end_date=end_date,
                   style = {
                        'font-size': '6px','display': 'inline-block', 'border-radius' : '2px', 
                        'border' : '1px solid #ccc', 'color': '#333', 
                        'border-spacing' : '0', 'border-collapse' :'separate'
                        } 
                   )

in CSS file, i also added this and it doesn't work, Thanks for help, please

.DateInput, .DateInput_1 {
  width: 100%;
}

Answer 1

I added your code to a html.Div

import dash
from dash import dcc, html
from datetime import date, timedelta, datetime 


app = dash.Dash(__name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}])


app.layout = html.Div([html.H4('Select a start and end date:'),
                    dcc.DatePickerRange(id='date-range',
                   min_date_allowed=datetime(2020,1,1),
                   max_date_allowed=datetime.today(),
                   start_date=datetime(2020,1,1), 
                   end_date=datetime(2020,1,1),
                   style = {
                        'font-size': '6px','display': 'inline-block', 'border-radius' : '2px', 
                        'border' : '1px solid #ccc', 'color': '#333', 
                        'border-spacing' : '0', 'border-collapse' :'separate'
                        } )
                 ])



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

And I got it