JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">DIV 1</div>
<div class="two">DIV 2</div>
<button class="test_css">Test .css()</button>
<button class="test_offset">Test .offset()</button>
<button class="toggle">Toggle</button>
<div class="result">
    DIV 1: <span id="pos_one">n/a</span><br/>
    DIV 2: <span id="pos_two">n/a</span>
</div>

CSS

div.one {
    display: none;
    position: absolute;
    top: 200px;
    left: 100px;
    color: green;
    border: 1px solid green;
    padding: 5px;
}

div.two {
    display: block;
    position: absolute;
    top: 300px;
    left: 100px;
    color: red;
    border: 1px solid red;
    padding: 5px;
}

JavaScript

$(".test_css").click( function(){
    $("#pos_one").html( $(".one").css("top") + ", " + $(".one").css("left") );
    $("#pos_two").html( $(".two").css("top") + ", " + $(".two").css("left") );
});

$(".test_offset").click( function(){
    $("#pos_one").html( $(".one").offset().top + ", " + $(".one").offset().left );
    $("#pos_two").html( $(".two").offset().top + ", " + $(".two").offset().left );
});

$(".toggle").click( function(){
    $(".one").toggle();
    $(".two").toggle();
});