JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>Quiz</title>
    </head>
    <body>
        <div class="slide">
            <header>
                <p id="progress">3/20
                </p>
                <!-- hfill -->
                <p id="timer">20:00
                </p>
            </header>
            <div class="question">
                <p id="question">What is 2+2?
                </p>
                <div class="items">
                    <!-- foreach loop in PHP -->                
                    <div class="item">
                        <img src="opencircle.png">
                        <p>1781</p>
                    </div>                  
                </div>                
            </div>
            <footer>
                <nav>
                    <div class="nav" id="back">
                        <img src="back.png">
                    </div>
                    <div class="nav" id="go-to">
                        <!-- PHP that takes entered value and shows slide -->
                        <img src="go.png">
                    </div>
                    <div class="nav" id="confirm"> 
                        <img src="confirm.png">
                    </div>   
                    <div class="nav" id="next">                       
                        <img src="next.png">
                    </div>
                </nav>
            </footer>                    
        </div>
    </body>
</html>

CSS

img {
    display: block;
}        

.slide {
    border: 3px solid black;
    margin: 5% 10%;
    width: 80%;
    height: 100%;
}

header {
    margin: 0;
    height: 10%;
}

header:after {
    display: table;
    clear: both;
    content: '';
}

header p {
    margin: 0;
    font-size: 300%;
}        

#progress {
    float: left;
}

#timer {
    float: right;
}

JavaScript

alert($('header').height());