Not able to render a complete component in my react app

I am learning react and am currently a newbie. While creating a react app which has multiple components I stumbled upon an issue which I am not able to resolve as of now.

Here is my code:

import React from "react";
import Left from "./Left";
import Right from "./Right";

function App() {
  return (
    <div>
      <Left />
      <Right />
    </div>
  );
}

export default App;

import React from 'react';
import "./style1.css";

function left() {
  return (
    
    <div className='container_left'>
        <h2 className='head'>Pocket Notes</h2>
        <button id='newGroup'> 
          <span className='plus'> + </span>
          Create Notes Group
        </button>
    </div>
    
  )
}

export default left;

/* Styles for container_left */

body{
    font-family: roboto;
    padding: 0;
    margin: 0;
}

.container_left {
    background-color: #ffffff;
    width: 25vw;
    height: 100vh;
}

.head {
    margin: 0;
    padding: 40px 20px 20px 10px;
    font-size: 25px;
    margin-left: 1.5rem;
}

.plus {
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    font-weight: 500;
    margin-right: 5px;
}

#newGroup {
    line-height: 1;
    color: #ffffff;
    background-color: #000000;
    border: 2px solid #000000;
    padding: 3px 18px 3px 18px;
    font-size: 18px;
    margin-top: 20px;
    margin-left: 5rem;
    border-radius: 25px;
    letter-spacing: .1rem;
    cursor: pointer;
}

This is my left component which will be on the left side which renders perfectly.

import React from 'react';
import "./style2.css";

function Right() {
  return (

    <div className='container_right'>
      <p className='para'>Send and receive messages without keeping your phone online.
      Use Pocket Notes on up to 4 linked devices and 1 mobile phone</p>
    </div>

  )
}

export default Right;

/* Styles for container_right */

body{
    font-family: roboto;
    padding: 0;
    margin: 0;
    /* background-color: #F7ECDC; */
}

.container_right {
    background-color: #F7ECDC;
    width: 75vw;
    height: 100vh;
}

.para {
    color: #000000;
    text-align: center;
    position: relative;
}

This is the right element which makes the issue. It is not rendering as I want. It should display the color on 75% viewport and also display the contents inside it which it is not doing. Also when I tried looking into the developer tools the right elements box model is visible in the tools section but when it is selected the page doesn't highlight the right section while it does for the left section. I tried providing background color to the body which works fine but still, the issue is that the content in the right container is not visible in any of the cases. I also tried giving the right section a pseudo element --> solves the problem for the background color but the same issue persists that the content inside the container is not visible.

.container_right::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F7ECDC;
    opacity: 0.8;
    z-index: -1;
  }

Kindly help!

Brother, Please provide your App.js or that component where you added those 2 component in 1 file, If you didn't understand please provide App.js,

or please make sure your app.js look like this

import React from "react";
import Left from "./Left";
import Right from "./Right";

function App() {
  return (
    <div class="container" style={{
    width: "100vw" ,
    display: "flex"
      }}>
      <Left />
      <Right />
    </div>
  );
}

export default App;