JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<p>Empty text</p>

<!-- I want the "empty text" part to go *below* the header, not under it -->

CSS

body {
    margin: 0;
    padding: 0;
}

header {
    display: block;
    height: 100px;
    width: 100%;
    background: rgba(255, 255, 255, .7);
    position: fixed;
    top: 0;
    border-bottom: 3px solid;
}

JavaScript

var p = document.getElementsByTagName("p")[0],
    header = document.getElementsByTagName("header")[0],
    h = window.getComputedStyle(header).getPropertyValue("height");

p.style.marginTop=h;
console.log(h);