JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<input size="11" onfocus="setTable();" id="lost" name="lost" type="text"> Click in this box

<table class="calculations" id="forfeitTable1"    width="100%" border="0">
        <tr>
          <td><div class="legend" >Forfeited Credit</div>
            <div class="outer">
              <table width="100%" border="0">
                
                <tr>
                  <td width="70%"><span id="forfeitInfo">No additional cost. However,</span> each guest will forfeit $<span class="redCost" id="ppForfeitedDisplay">0</span></td>
                  
                </tr>
               </table>
            </div></td>
        </tr>
      </table>

      <table class="calculations" style="display:none" id="forfeitTable2"    width="100%" border="0">
        <tr>
          <td><div class="legend" >Forfeited Credit</div>
            <div class="outer">
              <table width="100%" border="0">
                
                <tr>
                  <td width="70%"><span id="forfeitInfo">No additional cost. However,</span> each guest will forfeit $<span class="redCost" id="ppForfeitedDisplay">0</span></td>
                  
                </tr>
              </table>
            </div></td>
        </tr>
      </table>
    
    <br>
         <br>
              <br>
                  
    Why is the second outline not the same length as the one above even though the only difference is that the second one was originaly hidden?

CSS

.outer { 
border-left: 1px solid #A3A2A2; 
border-top: 1px solid #A3A2A2; 
border-right: 1px solid #A3A2A2; 
border-bottom: 1px solid #A3A2A2; 
padding: 25px 10px 10px 10px; 

}

.legend {
	font-size: 16px;
	float: left;
	margin-left: 15px;
	margin-top: -8px;
	padding-left: 5px;
	padding-right: 5px;
	background: #FFF;
}

.calculations {
	margin-top: 12px;
	color: #888;
}

JavaScript

function setTable(){

if(document.getElementById("forfeitTable2").style.display=="none"){
document.getElementById("forfeitTable2").style.display="table";
}
else if(document.getElementById("forfeitTable2").style.display!="none"){
document.getElementById("forfeitTable2").style.display="none";
}
}