react collapisble panel css issue - css

Question

I'm trying to add a Collapsible in my project. The functionality works simply. But there is a CSS issue in collapsible. When I click on a header the collapsible panel opens on after all the header. I want to open the collapsible panel next to each header. I'm using react-collapsible package.
Here is my code,
return (
assignTasklist && assignTasklist.map((assign) =>
<div className="dashboard-tasklists-group_header">
<div id={assign.TaskType} className={ "dashboard-tasklists-group_header-left"} onClick={()=> {
// e.preventDefault();
// e.stopPropagation();
this.onToggleAccordion(assign.TaskType)}}>
{assign.Description}
</div>
<div className="dashboard-tasklists-group_header-right">
<button className="dashboard-tasklists-group_header-caret-button" onClick={()=> {
// e.preventDefault();
// e.stopPropagation();
this.onToggleAccordion(assign.TaskType)}}>
<CaretIcon />
</button>
</div>
</div>
)
);
}
render() {
const { assignDetails } = this.props;
return <div className="dashboard-tasklists-group">
<Collapsible trigger={this.groupWorkingHeader()} /* handleTriggerClick={() => {
}}open={this.state.testflag} */ >
{assignDetails && assignDetails.length>0 && <div className="dashboard-index_announcements-wrapperWP" style={{cursor:'pointer'}}>
<div /* className="dashboard-index_announcements" */ style={{maxHeight: '240px',overflowY: "scroll"}}>
{assignDetails.map(patient =>
<div onClick={()=> { browserHistory.push(`/patientsTask/${patient.PatientID}`); }} className="showingdet"><span style={{fontWeight:700}}>{patient.PatientID}</span>-{patient.Name}</div>
)}
</div>
</div>}
</Collapsible>
</div>;
}
Please help me to solve