CSS - Add padding only if another div is visible - html

Question

I have the following html..
.wrapper {
background:wheat;
}
.woocommerce-store-notice, p.demo_store {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
font-size: 1em;
padding: 1em 0;
text-align: center;
background-color: #a46497;
color: #fff;
z-index: 99998;
box-shadow: 0 1px 1em rgba(0,0,0,.2);
}
<div class="wrapper">
This is my content
</div>
<p class="woocommerce-store-notice demo_store" style="display: block;">DEMO NOTICE CLICK HERE Dismiss</p>
The notice is covering up my content, I know I can add some padding to fix this but how can I add it so that the padding only applies if the .woocommerce-store-notice is visible?

Answer 1

You may solve it using 1 line of jQuery.
In the code, $(".woocommerce-store-notice").outerHeight() gets the height of the notice and applies the value to margin-top of .wrapper
$(".wrapper").css({"margin-top":$(".woocommerce-store-notice").outerHeight()})
.wrapper {
background:wheat;
}
.woocommerce-store-notice, p.demo_store {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
font-size: 1em;
padding: 1em 0;
text-align: center;
background-color: #a46497;
color: #fff;
z-index: 99998;
box-shadow: 0 1px 1em rgba(0,0,0,.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="woocommerce-store-notice demo_store" style="display: block;">DEMO NOTICE CLICK HERE Dismiss</p>
<div class="wrapper">
This is my content
</div>

Answer 2

If you can't change the html markup, you can use flex to change the order of your selectors i.e. .woocommerce-store-notice, p.demo_store would be order: 0; and .wrapper would be order: 1; This way you don't have to depend on absolute positioning to make sure the notice appears at the top of your page.
Try the snippet below.
// dismiss the notice by clicking the "Dismiss" link"
document.querySelector('.woocommerce-store-notice__dismiss-link').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('.woocommerce-store-notice').style.display = 'none';
});
* {
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
}
.wrapper {
background: wheat;
order: 1;
}
.woocommerce-store-notice,
p.demo_store {
order: 0;
font-size: 1em;
padding: 1em 0;
text-align: center;
background-color: #a46497;
color: #fff;
box-shadow: 0 1px 1em rgba(0, 0, 0, .2);
}
<div class="flex">
<div class="wrapper">
This is my content
</div>
<p class="woocommerce-store-notice demo_store">DEMO NOTICE CLICK HERE Dismiss</p>
</div>