I'm facing an issue with setting the view port height for two columns in React-bootstrap. Despite my efforts, both columns end up having the same height which is not the desired outcome. I'm unsure if this is a mistake on my part or not. Here is the code snippet for reference:
import React from "react;
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col"
const AdminPanel = () => {
const users = [{ name: "Talha" }, { name: "Ali" }];
return (
<Container className="pt-5">
<Row className="d-flex justify-content-around">
<Col className="vh-50 border border-primary col mx-5">
{users.map((user) => (
<Row className="py-2 px-2">{user.name}</Row>
))}
</Col>
<Col className="border border-primary mx-5">
<h1>
list list list list list list list list list list list list list
</h1>
</Col>
</Row>
</Container>
);
};
export default AdminPanel;Here is the screenshot of the result: Result
I would appreciate any assistance in resolving this issue.