Dropdown menu not going over div - css

Question

I'm following this tutorial https://blog.campvanilla.com/reactjs-dropdown-menus-b6e06ae3a8fe to make a dropdown in my React app.
The click/open function works fine except the menu, which is inside of its own component is not going beyond the header container:
Here is the css for my Header:
#inner-header {
background-color: #f1c40f;
font-family: "Rubik", sans-serif;
font-weight: 700;
display: flex;
width: 100%;
flex-direction: space-between;
height: 60px;
align-items: center;
padding: 15px 0 15px 2.5%;
align-items: top;
}
The tutorial didn't show CSS for the dropdown so I created my own:
.drop-down {
z-index: 1000;
overflow-y: visible;
width: 300px;
background-color: white;
display: block;
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}
The only difference between my code and the tutorial is that I've imported the <Card /> component into my header in a React Component:
import React from 'react'
import {Link} from 'react-router-dom'
import logo from '../images/logo.svg'
import Card from '../components/Card'
export default function InnerHeader() {
return (
<>
<div id="inner-header">
<div className="logo">
<Link to="/dashboard"><img src={logo} height="50px" alt="snack-page" /></Link>
</div>
<Card />
</div>
</>
)
}
I thought that giving the dropdown a z-index would allow it to go over the header but that wasn't the case. What is the best way to display the dropdown while it's in its own component? I'm not sure what the solution would be in this case?

Answer 1

I was able to resolve this by making two changes to the code based on the answers here (slightly modified)
First, the flex-direction needed to be set to row.
Next, justify-content needed to be set to space-between as #JoeLloyd pointed out in my typo.
Finally, the z-index is now set to 3 and was given a position of relative
#inner-header {
background-color: #f1c40f;
font-family: "Rubik", sans-serif;
font-weight: 700;
display: flex;
width: 100%;
height: 75px;
justify-content: space-between;
flex-direction: row;
padding: 15px 0 15px 2.5%;
align-items: top;
}
.menu-button {
padding-right: 15px;
float: right;
}
.drop-down {
z-index: 3;
margin-right: 12px;
position: relative;
width: 200px;
height: 200px;
display: inline-block;
background-color: white;
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

Answer 2

flex direction is wrong
Set it to column if you want your content to go into a column and not a row. There's no such thing as flex-direction: space-between;
flex-direction: column;