有没有一种方法可以将组件从全屏切换到React中的两行

Question

（新来了，所以我的问题听起来很蠢）

我正在尝试构建一个具有列表的react项目。单击列表项之一之前，列表应覆盖整个宽度。我希望当单击列表项之一时，该组件从全屏移至半屏，并在右侧显示一些新内容，在左侧显示列表。

所以，实质上，单击后我要寻找的是

<div className="main-component">
            <div className="row">
                <div className=" left-component">
                    <DataList data={data} />
                </div>
                <div className="right-component">
                    <Switch>
                        <Route path='/data/'component={DefaultPage} />
                        <Route path='/home/datadetails/:id'component={DataContent} />
                    </Switch>
                </div>
            </div>
            
        </div>

在单击之前，列表应为全屏宽度，在单击之后，列表应移至屏幕的左半部分，并将要显示的列表项的内容移至屏幕的右半部分。

请协助。