JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="t" value="display_none"/>
<input type="text" id="v" value="visibility_none"/>

CSS

#t{
 position:absolute;
 left:200px;
 top:300px;  
 margin:0px;
 padding:5px;
 display:none;
}

#v{
 position:absolute;
 left:200px;
 top:300px;  
 margin:0px;
 padding:5px;
 visibility:hidden;    
}

JavaScript

var msg = "Input => Display none " +
          "<br/>Offset Left: "+$("#t").offset().left +
          "<br/>Offset Top: "+$("#t").offset().top +
          "<br/>position Left: "+$("#t").position().left + 
          "<br/>position Top: "+$("#t").position().top +
          "<br/>css Left: "+$("#t").css("left") +
          "<br/>css Top: "+$("#t").css("top") +
          "<br/>css MarginLeft: "+$("#t").css("marginLeft") +
          "<br/>css MarginTop: "+$("#t").css("marginTop") +
          "<br/>css PaddingLeft: "+$("#t").css("paddingLeft") +
          "<br/>css paddingTop: "+$("#t").css("paddingTop") ;

msg    += "<br/><br/>Input => Visibility hidden " + 
          "<br/>Offset Left: "+$("#v").offset().left +
          "<br/>Offset Top: "+$("#v").offset().top +
          "<br/>position Left: "+$("#v").position().left + 
          "<br/>position Top: "+$("#v").position().top +
          "<br/>css Left: "+$("#v").css("left") +
          "<br/>css Top: "+$("#v").css("top") +
          "<br/>css MarginLeft: "+$("#v").css("marginLeft") +
          "<br/>css MarginTop: "+$("#v").css("marginTop") +
          "<br/>css PaddingLeft: "+$("#v").css("paddingLeft") +
          "<br/>css paddingTop: "+$("#v").css("paddingTop") ;    

document.write(msg);