JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal addmenu">
        <fieldset>
            <p>
                <div>
                <table><tr>
                    <td><div>Item 1</div></td>
                    <td><div>Item 2</div></td>
                </tr></table>
                </div>
            </p>
            
            <!-- This should be under the p above -->
            <p class="newmenu" id="SlideOut">
                <label for="new-menu">Name of a new menu:</label>
                <span>
                    <input id="new-menu">
                </span>
            </p>
        </fieldset>
</div>

CSS

.modal.addmenu fieldset div 
{
   z-index: 5000; /* Attempt to show div over p.newmenu */
    position:relative;
   background-color: #ffffff; /* force white background? */
}

.modal.addmenu fieldset table { height: 70px; margin: 0px; padding: 0px; }
.modal.addmenu fieldset table td { vertical-align: middle; text-align: center; line-height: 25px; font-weight: bold; color: #404040; font-size: 15px; }
.modal.addmenu fieldset table td div { min-width: 100px; max-width: 100px; height: 60px; border: 1px solid #c0c0c0; overflow: hidden; margin: 5px; padding: 15px; }
.modal.addmenu fieldset table td div.new { font-style: italic; text-decoration: underline; }

.modal.addmenu fieldset p.newmenu
{
    margin-top: -30px;
    z-index: 0; /* attempt to show this under div above */
    position:relative;
}

JavaScript

$(document).ready(function() {
        var so = document.getElementById('SlideOut');
        so.style.marginTop = 0;
});