JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<div id="wrapper">
    <div id="header">
        <img src="header_image.svg" alt="the img is empty"/>
    </div>
    <div id="content">
        Some content
        <button  onclick="AddContent()">click me to enlarge the header</button >
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0px;
}
#wrapper:before {
    content:'';
    float: left;
    height: 100%;
}
#wrapper {
    height: 100%;
    background-color: black;
    color: white;
}
#header {
    background-color:#000;
}
#content {
    background-color: gray;
}
#content:after {
    content:'';
    display: block;
    clear: both;
}

JavaScript

function AddContent() {
    $("<div>More content</div>").appendTo($("#header"));
}