How to move up 1 of 3 columns up. Using Flexbox - css

Question

I think i have simple problem. I have 3 columns called Left, Middle, Right obviously ^^
Width of these columns is set to 20%-65%-15% (Left-Mid-Right). I'd need set the left columns at the same line menu is.
index.html
<div class="header-IMG">
<h1>IMG</h1>
</div>
<div class="header-menu">
<horizontal-menu></horizontal-menu>
</div>
<div class="Parent">
<div class="left">
<vertical-menu></vertical-menu>
<center>
<h1>Left</h1>
</center>
</div>
<div class="middle">
<center>
<h1>Middle</h1>
</center>
</div>
<div class="right">
<center>
<h1>Right</h1>
</center>
</div>
</div>
Styles
.Parent {
display: flex;
flex-direction: row;
}
.left {
width: 20%;
height: 100vh;
border: 2px solid red;
color: white;
}
.middle {
width: 65%;
border: 2px solid orange;
}
.right {
width: 15%;
border: 2px solid white;
height: 100vh;
}
For better imagination i send the image from my localhost here:
I tried set to .left position: absolute and then set top property but i think there must be something smarter cuz in this case i had to set padding to middle...

Answer 1

As commented A.Haworth, what about css grid!
Lot of writing saying to use grid for website, not flex. Use flex for 1 element and elements inside it.
#grid {
display: grid;
grid-template-rows: 80px 1fr;
grid-template-columns: 20% 65% 15%;
gap: 0;
width: 100vw;
height: 100vh;
}
#div1 {
grid-area: 1 / 1 / 3 / 2;
background-color: rgba(143, 36, 28, 0.5);
}
#div2 {
grid-area: 1 / 2 / 2 / 4;
background-color: rgba(148, 208, 189, 0.5);
}
#div3 {
grid-area: 2 / 2 / 3 / 3;
background-color: rgba(170, 154, 160, 0.5);
}
#div4 {
grid-area: 2 / 3 / 3 / 4;
background-color: rgba(11, 38, 185, 0.5);
}
<div id="grid">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>