Css Aligned Top with other element

Question

I want to show panel1(div) when I hover button1, show panel2(div) when I hover button2. But the problem now is that the panel won't align top with the button. I've tried "Vertical-Align, Align-items", still couldn't figure out how to do it, please help!

But it always display like this:

Here is my code HTML:

<div class="Nav">
  <span id='Span_Nav'>
    <button class="Btn_Nav" id="Btn_Nav_Equipment" >
      <div class="Panel_Nav" id='Panel_Equipment'></div>
        <span>
          <label class="Lb_Nav">Equipment</label>
        </span>
    </button>
    <button class="Btn_Nav" id="Btn_Nav_Report">
      <div class="Panel_Nav" id='Panel_Report' ></div>
        <span>
           <label class="Lb_Nav">Report</label>
        </span>
    </button>
  </span>
</div>

CSS:

.Btn_Nav{
  width: 100%;
  background: transparent;
  background-color: transparent;
  display: inline-block;
  outline: none;
  border: 0;
  height: 6vh;
}
.Btn_Nav > span{
  background: transparent;
  background-color: transparent;
  display: inline-block;
  outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
  color: white;
  background: transparent;
  background-color: transparent;
  display: inline-block;
}
#Span_Nav{
  position: absolute;
  width: 100%;
  top:10vh;
}
button > div.Panel_Nav {
  margin-top: 0;
  position: absolute;
  z-index: 1;
  transition-timing-function: ease;
  transition: linear .3s;
  vertical-align: top;
  visibility: hidden;
  opacity: 0;
  left: 100%;
  width: 500%;
  height: 6vh;
  background: #0f5787;
  border: 2px solid;
  outline: none;
}
button:hover > div.Panel_Nav {
  visibility: visible;
  opacity: 1;
}

Answer 1

Update 2: Based on OP's fiddle

.Btn_Nav > span{
    background: transparent;
    background-color: transparent;
    display: inline-block;
    outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
    background: transparent;
    background-color: transparent;
    display: inline-block;
}
#Span_Nav{
    position: absolute;
    width: 100px;
    top:10px;
}
button > div.Panel_Nav {
    margin-top: -2px;
    position: absolute;
    z-index: 1;
    transition-timing-function: ease;
    transition: linear .3s;
    visibility: hidden;
    opacity: 0;
    left: 100%;
    width: 500%;
    height: 20px;
    background: #0f5787;
    outline: none;
}
button:hover > div.Panel_Nav {
    visibility: visible;
    opacity: 1;
}

Update 1: CSS code

body {
    padding: 5px;
  background: blue;
}

.Btn_Nav{
  width: 10%;
  background: #eee;
  background-color: #eee;
  display: block;
  margin: 20px;
  border: 0;
  height: 100%;
}

.Btn_Nav > span > label.Lb_Nav{
  color: #333;
  background: transparent;
  background-color: transparent;
  display: block;
}
#Span_Nav{
  position: absolute;
  width: 100%;
}
button > div.Panel_Nav {
  margin-top: -2px;
  position: absolute;
  z-index: 1;
  transition-timing-function: ease;
  transition: linear .3s;
  vertical-align: top;
  display: none;
  opacity: 0;
  left: 12%;
  width: 50%;
  height: 18px;
  background: #0f5787;
}
button:hover > div.Panel_Nav {
  display: block;
  opacity: 1;
}

Adding a top value fixes the issue.

button:hover > div.Panel_Nav {
 visibility: visible;
 opacity: 1;
 top: 0;
}

Answer 2

Check your answer here https://jsfiddle.net/g3yL9cro/1/

.Btn_Nav{
    position: relative;
}

button:hover > div.Panel_Nav {
    top: 0px;
}