Python 3.x html组件堆栈而不是使用破折号的列

我是Dash新手，在尝试设置应用程序时遇到问题。 我想并排绘制两个文本框。一个应占屏幕宽度的1/3，另一个应使用剩余的2/3。但是，当我运行我的应用程序时，这些框彼此重叠：

import dash
import dash_html_components as html

content = html.Div([
    html.Div([
        html.Div([html.H4('Simulation time', className='card-title')], className='four columns', style=dict(display='flex')),
        html.Div([html.H4('Simulation results', className='card-title')], className='eight columns', style=dict(display='flex'))
    ], className='row', style=dict(display='flex'))
], style=dict(display='flex'))

app = dash.Dash(__name__)
app.layout = content

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

---

非常感谢您的帮助。

当我运行代码时，您的代码运行良好，没有任何更改。文本并排出现。我已经更新了它，以提供您想要的宽度

content=html.Div([
html.Div([
html.Div（[html.H4（'Simulation time'，className='card-title'）]，className='four columns'，style=dict（width='33%），
html.Div（[html.H4（'Simulation results'，className='card-title'）]，className='8列'，style=dict（width='66%'））
]，className='row'，style=dict（display='flex'，width='100%'））
]，style=dict（display='flex'））

请参见或。这是否回答了您的问题？不，不幸的是，将style=dict（display='flex'）添加到每个Div并不能使它们并排放置。它们仍然是堆垛机。我更新了我的问题，以反映我所做的尝试。谢谢你的时间和回答。是的，当我重新启动电脑时，它也对我有效。我不知道以前为什么会有问题。因此，我已将您的解决方案标记为答案。