I am having trouble with fitting my image and graph into my container neatly in my Plotly Dash Graph.

This is my code for the relevant HTML Components and their respective callbacks:

#Container for image and stats graph
app.layout = html.Div([
            html.Div(id='image-container', style={'margin-top': '100px'}),
            dcc.Graph(id='stats-graph', style={'position': 'absolute', 'width': '100%', 'height': '300px'})
            ], style={'position': 'relative', 'display': 'flex', 'flexDirection': 'column', 'alignItems': 'center',
                  'border': '2px solid white', 'padding': '10px', 'backgroundColor': '#111111',
                      'width': '800px', 'height': '450px', 'overflow': 'hidden', 'marginTop': '50px'},
                  className='center'),


# Callback to display the image on click
@app.callback(
    Output('image-container', 'children'),
    Input('line-graph', 'clickData')
)
def display_image(clickData):
    if clickData is None:
        return ""

    # Extract the sprite link from clickData's customdata
    sprite_link = clickData['points'][0]['customdata'][0]

    return html.Img(src=sprite_link,
                    style={
                         ''"margin-top": "-75px", "left": "-20px", "top": "20px", "width": "210px", "height": "210px", "max-width": "100%", "max-height": "100%"}, className='center')


# Callback to update the stats graph based on clicked Pokémon
@app.callback(
    [Output('stats-graph', 'figure'),
     Output('stats-graph', 'style')],
    Input('line-graph', 'clickData')
)
def update_stats_graph(clickData):
    if clickData is None or not clickData['points']:
        # Return an empty figure
        return {'data': []}, {'display': 'none'}

    try:
        customdata = clickData['points'][0].get('customdata', [])
        if len(customdata) < 2:
            return px.bar(title="No stats data available"), {'display': 'block'}

        pokemon_name = customdata[1]
        print(f"Clicked Pokémon: {pokemon_name}")

        # Filter pokemon_stats DataFrame to get stats for the selected Pokémon
        pokemon_stats_df = df_final[df_final['Name'] == pokemon_name]

        if pokemon_stats_df.empty:
            return px.bar(title=f"No stats available for {pokemon_name}"), {'display': 'block'}

        # Example: Assuming you have columns like 'HP', 'Attack', 'Defense'
        stats_columns = ['HP', 'Attack', 'Defense', 'Sp.Attack', 'Sp.Defense',
                         'Speed']  # Replace with your actual stat columns

        # Select only the stats columns for the selected Pokémon
        stats_data = pokemon_stats_df[stats_columns].iloc[0]

        # Create a DataFrame suitable for plotting with Plotly Express
        stats_df = pd.DataFrame({
            'Stat': stats_data.index,
            'Value': stats_data.values
        })

        fig = px.bar(stats_df, x='Stat', y='Value',
                     title=f'Stats for {pokemon_name}')
        fig.update_layout(template='plotly_dark')
        return fig, {'display': 'block'}
    except (IndexError, KeyError) as e:
        print(f"Error accessing custom data: {e}")
        return px.bar(title="Error displaying stats"), {'display': 'block'}

This is what it looks like when I run my code: My Graph

This is what I wish my box to look like:
Desired Graph Appearance