I'm trying to create a React app where I have two components:

1. (placed on the left)
2. (should take the remaining space on the right)

I want to use Flexbox to align both components horizontally, but for some reason: A. Sidebar appears, but Main is not rendering correctly B. Flexbox styles don’t seem to apply Why is my component not rendering properly, and how can I correctly use Flexbox to align these components side by side? CODE SNIPPETS:

1. Main.jsx

import React from 'react'
import './Main.css'
const Main = () => {
  return (
    <div>
        hello world
    </div>
  )
}
export default  Main 

2. App.jsx

import React from 'react'
import Sidebar from './components/Sidebar'
import Main from './components/Main'
import Special from './components/special'
const App = () => {
  return (
    <>
    <div className='star'>
    <Main/>
    <Sidebar/>
    <Special/>
    
    </div>
   
    </>
  )

}

export default App

3. index.css

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: serif;
}
body{
  min-height: 100vh;
  display: flex;
}