JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header id='headerinput'>
        <br>
        <form id='reload' name="Actions" action="Viewer.php" method="post">
            <div id='LookupSection'>
                Whole Number
                <input type="text" id='WholeNumber' name="WholeNumber" title="Enter the whole number here" value = 'SS'>
                <button type="button" onclick="toggleDropdown();">Select</button> 
                <div id='WholeNumberDiv'>
                    <table id='wholeNumberDropdown'>
                    </table>
                </div>
            </div>
        </form>
    </header>
    <div id="sidebar">
        <a href="" onclick="window.location.reload();">Clear</a>
        <br>
        <a href="" onclick="toggleDropdown();">Gather Images</a>
        <br>
    </div>
    <div id="content">
        <Table id='ImageDataTable'>
            <thead id="ImageDataHeader">
                <tr style="position:relative;display:table-row">
                    <th class='ImageDataCell' width="200px">Whole Nbr</th>
                    <th class='ImageDataCell' width="50px">Type</th>
                    <th class='ImageDataCell' width="50px">Size</th>
                    <th class='ImageDataCell' width="100px">Revision</th>
                    <th class='ImageDataCell' width="100px">Other Nbr</th>
                    <th class='ImageDataCell' width="50px">Sheet Nbr</th>
                    <th class='ImageDataCell' width="50px">Of Sheets</th>
                    <th class='ImageDataCell' width="50px">Frame Nbr</th>
                    <th class='ImageDataCell' width="50px">Of Frames</th>
                    <th class='ImageDataCell' width="250px">Doc Title</th>
                    <th class='ImageDataCell' width="100px">Volume</th>
                    <th class='ImageDataCell' width="50px">Note</th>
                    <th class='ImageDataCell' width="50px">Prnt</th>
                    <th class='ImageDataCell' width="50px">Obs</th>
                    <th...

CSS

html, body {
    height: 100%;
    margin: 0;
    width: 100%
}

header {
    width: 100%;
    height: 60px;
    background-color: #013499;
    margin: 0;
}

#sidebar {
    background-color: #7690C5;
    bottom: 60px;
    float: left;
    height: calc(100% - 120px);
    top: 60px;
    width: 200px;
}

#content {
    background-color: #F2F2F2;
    bottom: 60px;
    float: left;
    height: calc(100% - 120px);
    top: 60px;
    width: calc(100% - 200px);
}

footer {
	clear: both;
    margin: -60px 0 0 0;
    width: 100%;
    height: 60px;
    background-color: #013499;
}

.buttons {
	float: right;
	margin-right: 20px;
}

#dropDownButton {
	vertical-align: -5px;
}

#WholeNumber {
	width: 135px;
}

#LookupSection {
	color: white;
    height: 60px;
	margin-left: 220px;
}

.WholeNumberCell {
    background-color: white;
    color: #000000;
}

#ImageDataTable {
	border: 1px solid black;
	border-spacing: 0;
    height: 100px;
	padding: 0;
    widht: 100%;
}

.ImageDataCell {
    background-color: white;
    border: 1px solid black;
    color: #000000;
}

#WholeNumberDiv {
	margin-left: 100px;
	height: 0;
	overflow: auto;
}

.send_button {
	margin-right: 20px;
	text-align: right;
}

JavaScript

toggleDropdown();

function gatherImageData(id, row) {
	row.onclick = function () { alert("build table for " + id); };
    
}

function toggleDropdown() {

	var wholeNumberData;

    if (document.getElementById('WholeNumberDiv').style.display != "block") {
        
        var wholeNumber = document.getElementById('WholeNumber').value;
        
        if (wholeNumber != '') {
            
            var table = document.getElementById("wholeNumberDropdown");
            //Clear any prior data
            
            while(table.rows.length > 0) {
                table.deleteRow(0);
            }
            
            for (r = 0; r < 11; r++) {
                var newRow = table.insertRow(table.rows.length);
                gatherImageData(r, newRow);
                var newCell  = newRow.insertCell(0);
                var newText  = document.createTextNode(r);
                newCell.appendChild(newText);
                var newCell  = newRow.insertCell(1);
                var newText  = document.createTextNode('r' + r);
                newCell.appendChild(newText);
            }
            
            //Show table
            document.getElementById('headerinput').style.height='60%';
            document.getElementById('sidebar').style.top='60%';
            document.getElementById('sidebar').style.height='calc(40% - 60px)';
            document.getElementById('content').style.top='60%';
            document.getElementById('content').style.height='calc(40% - 60px)';
            document.getElementById('WholeNumberDiv').style.display = "block";
            document.getElementById('WholeNumberDiv').style.overflow = "visible";
            document.getElementById('WholeNumberDiv').style.width='160px' ;
            document.getElementById('WholeNumberDiv').style.height=document.getElementById('headerinput').offsetHeight-60 + 'px';

        }
        else {
            alert("Please enter a whole number.");
        }
	}
	else {
		hideDropdown();
	}
}

function...