Как заставить кнопку следовать ползунку div с переключателем

Question

Я создаю навигационную панель, которая переключается при нажатии на кнопку. Это сделано, но моя кнопка зафиксирована в том же месте, и я хотел бы, чтобы она следовала за движением моей скользящей панели навигации. Как я могу это сделать?

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle("slow");
  });
});

.main_menu {
  position: fixed;
  top: 0;
  background-color: #358ef3;
  height: 9rem;
  width: 100%;
}

.wideScreen {
  margin-top: -0.625rem;
  width: 4rem;
  height: 1rem;
  position: fixed;
  top: 9rem;
  left: 0;
}

.wideScreen>button {
  width: 100%;
  height: 100%;
}

.wideScreen>button>img {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_menu" id="panel">
  <form class="" action="index.html" method="post">
    <div class="slidecontainer">
      <h2>Bac+: <span id="output"></span></h2>
      <label for="myRange"></label><input type="range" min="1" max="8" value="0" class="slider" id="myRange">
    </div>
  </form>
</div>
<div class="wideScreen">
  <button id="flip">
    </button>
</div>

Answer 1

По какой причине кнопка не может быть внутри элемента, частью которого она является (заголовок)?

$(document).ready(function() {
    $("#flip").click(function() {
        $("#panel-inner").slideToggle("slow");
    });
});

body {
    padding: 0;
    margin: 0;
}

#panel {
    position: fixed;
    top: 0;
    width: 100%;
}

.main_menu {
    background-color: #358ef3;
    height: 9rem;
    overflow: hidden;
}

.wideScreen {
    width: 4rem;
    height: 1rem;
}

.wideScreen>button {
    width: 100%;
    height: 100%;
}

.wideScreen>button>img {
    width: 100%;
    height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="panel">
    <div id="panel-inner" class="main_menu">
        <form class="" action="index.html" method="post">
            <div class="slidecontainer">
                <h2>Bac+: <span id="output"></span></h2>
                <label for="myRange"></label>
                <input type="range" min="1" max="8" value="0" class="slider" id="myRange">
            </div>
        </form>
    </div>

    <div class="wideScreen">
        <button id="flip">
        </button>
    </div>
</div>

Answer 2

Замените следующие правила CSS

.wideScreen {
  margin-top: -0.625rem;
  width: 4rem;
  height: 1rem;
  position: fixed;
  top: 9rem;
  left: 0;
}

на

.wideScreen {
  margin-top: -0.625rem;
  width: 4rem;
  height: 1rem;
 top: 9rem;
  left: 0;
}

Проблема связана с фиксированным позиционированием.