JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toggle-container">
        
    <div id="toggle-text"> <p class="notranslate"><a href="#"
         onclick="toggle_visibility('toggle-box');">TOGGLE BOX</a></p>
		   
        <script type="text/javascript">
       
           function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
           e.style.display = 'none';
           else
           e.style.display = 'block';
           }
  
        </script>

         <div id="toggle-box"> 	
              
             <div id="box-content">Content in toggle-box with OTHER divs in it.</div>

		   <div id="translate-box-close"><a onclick="document.getElementById('toggle-box').style.display='none';return false;" href="">CLOSE BOX</a></div>
     </div>
   </div>
    
Text in toggle-container. Not affected by box.
    
</div>

Text in rest of page. Not affected by box.

<br/><br/> But, how do I make the box close when clicking OUTSIDE of it as well?

CSS

body { 
   background: #c8c8c8;
}

#toggle-container { 
   background: #f0f0f0;
    width: 500px;
}

#toggle-text { 
   background: #fff;
    width: 250px;
}

#toggle-box { 
   position: ABSOLUTE;
   display: NONE;
   background: #969696;  
   width: 200px;
}

#box-content {
    background:#ff0000;
}