JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/carhartl/jquery-cookie/raw/master/jquery.cookie.js"></script>
<div id="news-list">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
<div id="banner">
    
</div>

CSS

#news-list {
    background: red;
    width: 350px;
    height: 350px;
    margin-top: 50px;
}

#banner {
    display: none;
    position: absolute;
    background: black url(http://darkerprojects.dreamhosters.com/images/TheFalconBanner-PodCast.gif) no-repeat center center;
    
}

JavaScript

// on load

var $newslist = $("#news-list");

// if we haven't shown the banner
if($.cookie('hidebanner') != 'true') { // the value will be null on first load
    // show the banner
    $("#banner")
        .css({
            width: $newslist.width(),
            height: $newslist.height(),
            top: $newslist.offset().top,
            left: $newslist.offset().left
            // you might need to use innerWidth/innerHeight if
            // you want to include padding or outterWidth to include margins
        })
        .show();
        // show the banner
    
    // set a cookie
    $.cookie('hidebanner', 'true');
}