JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="i" value="toggle" />
<div id="outerDiv"><div id="d"><table><tr><td>Label Value</td>
    <td><input type="text" id="uiLabel" value=""></td></tr></table></div></div>

CSS

#d { background: #ff0; width: 300px; height: 300px; left: 100px; top: 100px; position:relative;}
#outerDiv {background: #ff0; width: 300px; height: 300px; left: 100px; top: 100px;}

JavaScript

var divObj = document.getElementById('d');
var inputObj = document.getElementById('i');

inputObj.addEventListener('click', function(e) {
    divObj.style.display = (divObj.style.display == 'none') ? 'block' : 'none'; 
    e.stopPropagation();
}, false);
divObj.addEventListener('click', function(e) {
    e.stopPropagation();
}, false);
document.body.addEventListener('click', function(e) {
    divObj.style.display = 'none';
}, false)