How do I align 2 components next to each other in React?

Question

I've been building the UI for a chat room app in React. Everything was going fine until suddenly, it refreshes and the UI "broke". Basically, I have 2 components, a Sidebar component and a Chat component. I use flex to position them. Here is my code:

Sidebar.js

<div className="sidebar">
                <Card className="sidebar_card left">
                    <Icon icon="mountain" iconSize={40} />
                    <div>
                        <Button icon="search" minimal fill large />
                    </div>
                    <div>
                        <Button icon="plus" minimal fill large />
                    </div>
                </Card>
                <Card className="sidebar_card right">
                    <div>
                        <h2 className="bp3-heading">Smart Labs</h2>
                        <Popover content={popupMenu}>
                            <Button icon="chevron-down" minimal />
                        </Popover>
                    </div>
                    <CreateRoom />
                    <Menu>
                        {rooms.map(room => (
                            <SelectRoom text={room.name} id={room.id} />
                        ))}
                    </Menu>

                    <div></div>
                    <Button text="People" icon="new-person" minimal outlined />
                    <Menu>
                        <MenuItem text="Tony Quach" />
                    </Menu>
                </Card>
        </div>

Chat.js:

<div className="chat">
            <Card className="chat_card">
            <div className="chat_header">
                <h2 className="bp3-heading">{roomDetails?.name}</h2>
                <Divider />
            </div>
            <div className="chat_body">
                {roomMessages.map(({ message, timestamp, user, userImage }) => (
                    <Message
                        message={message}
                        timestamp={timestamp}
                        user={user}
                        userImage={userImage}
                    />
                ))}
           </div>
           <ChatInput roomName={roomDetails?.name} roomId={roomId} workspaceId={workspaceId} />
           </Card>
        </div>

Sidebar.css:

.sidebar {
    display: flex;
    flex: 0.2;
    height: 100vh;
}

.sidebar_card {
    border-radius: 0;
    margin: 0;
}

.sidebar_card > div {
    display: flex;
    justify-content: space-between;
}

.left > div {
    margin: 10px 0 0;
}

.right > div {
    margin: 0 0 20px;
}

Chat.css:

.chat {
    display: flex;
    flex: 0.7;
    height: 100vh;
}

.chat_card {
    width: 100%;
    border-radius: 0;
    margin: 0;
}

.chat_header {
    margin: 0 20px 0;
}

.chat_body {
    margin: 20px 20px 0;
}

And in App.js I just do:

<div class="app">
   <Sidebar />
   <Chat />
</div>

App.css:

app {
    display: flex;
}

I use Blueprint.js

I used border: 1px solid red to try to debug it, it seems that the Sidebar component, while only has a flex: 0.3 somehow takes up the whole width of the page and pushes Chat component down (so they stack on each other instead of align next to each other).

Any suggestions? Thank you.

Answer 1

I fixed it by adding position: absolute; left: 0 to Sidebar component and position: absolute; right: 0 to Chat component.