How to toggle sidebar without effecting the content ? css,react - css

Question

Im trying to toggle sidebar. I want it to be above the content but when i close the sidebar , content moves down. Probably its because of i used overflow:hidden but with display:none i cant use animation. How can i manage that?
Text.jsx
const Test = () => {
const [open,SetOpen] = useState(true);
function handleClick(){
SetOpen(!open)
}
return (
<div className="main">
<div className={open ? "sidebar" : "sidebar_collapsed"}>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<button onClick={handleClick} className="btn">X</button>
</div>
<div className='content'>
<button onClick={handleClick} className="btn">X</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
)
}
test.css
.main{
width: 100%;
height: 100%;
margin: 0;
}
.sidebar{
display: flex;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background:white;
width: 20%;
box-shadow: 2px 0 4px rgba(0,0,0,0.5);
transition: width .35s;
overflow: hidden;
height: 100%;
}
.sidebar_collapsed{
width: 0px;
}
.btn{
width: 30px;
height: 30px;
margin: 5px;
top: 0;
right: 0;
}
.content{
margin: 50px;
overflow: auto;
width: 100%;
height: 100%;
}