Frustrating space between hide/show button and toggle
<p>How can i get my toggle, to toggle from the same position the hide/show button is in. instead of having a gap between the hide/show button and the toggle.</p>

<p>I have tried everything i can think of:</p>

<p>defining the margin/padding top;</p>

<p>putting the button within the div.</p>

<p>But i cannot achieve what i was hoping to achieve.</p>

<p><strong>This is how i would like it to look :</strong></p>

<p><strong>Before click</strong></p>

<p><a href="https://i.stack.imgur.com/y9zsn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y9zsn.png" alt="enter image description here"></a></p>

<p><strong>After click</strong></p>

<p><a href="https://i.stack.imgur.com/pPgna.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pPgna.png" alt="enter image description here"></a></p>

<p>Any suggestions?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    function toggle_visibility(id) {
        
                var e = document.getElementById(id);
                if (e.style.display == 'block' || e.style.display == '')
                    e.style.display = 'none';
                else
                    e.style.display = 'block';
            }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div#first_product{
    width: 50%;
    margin-left: 301px;   
}

div#red_head{
    background-color: #ed1c24;
    height: 40px;
    color: #fff;
    padding-left: 15px;
    line-height: 35px;
}

div#first_product{
    padding:0;
    background-color: #f1f1f2;
    /*Dynamic height*/
    height:auto;
    min-height:250px;
    height:auto !important;        /* IE does not support min-height */
    height:250px;
    display: none; /*HIDE TOOGLE ON PAGE LOAD*/

}

#products_tog_but{
    background-color: #f8f9f9;
    border: 1.5px dashed #999999;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    margin-bottom: 20px;
}


div#hide_btn{
    width:50%;
    margin-left: 301px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;!--HIDE TOGGLE BTN --&gt;
        &lt;div id="hide_btn"&gt;
            &lt;button id="products_tog_but" onclick="toggle_visibility('first_product')"&gt;Hello!&lt;/button&gt;
        &lt;/div&gt;

        &lt;!-- TOGGLE BTN SECTION--&gt;   
        &lt;div id="first_product"&gt;
            &lt;div id="red_head"&gt;
                &lt;p id="menu_title" class ="hidden" onclick="hideText('text1')" &gt; Add your first menu item&lt;/p&gt;
            &lt;/div&gt;
            &lt;h3 id="menu"&gt;Menu Section&lt;/h3&gt;

            &lt;form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" &gt;               

                &lt;label id="cat_label" name="cat_label" class="lab"&gt;Name&lt;/label&gt;
                &lt;input type="text" id="cat_name" name="cat_name" value=""&gt;
                &lt;br&gt;
                &lt;label id="desc_label" name="desc_label" class="lab"&gt;Description&lt;/label&gt;
                &lt;input type="text" id="cat_desc" name="cat_desc" value=""&gt;

                &lt;input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"&gt; 

            &lt;/form&gt;
        &lt;/div&gt;</code></pre>
</div>
</div>
</p>