JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<header>
    header
    <input type="button" class="addHorizontalContent" value=" add horizontal content"/>
    <input type="button" class="addHorizontalContent" value="addhorizontalcontent"/>
    <input type="button" class="addVerticalContent" value="add vertical content"/>
</header>
<section>
    <div class="wrapperA">
        content
        <input type="button" class="addHorizontalContent" value=" add horizontal content"/>
        <input type="button" class="addHorizontalContent" value="addhorizontalcontent"/>
        <input type="button" class="addVerticalContent" value="add vertical content"/>
    </div>
</section>
<footer>
    <div class="wrapperB">
        footer
        <input type="button" class="addHorizontalContent" value=" add horizontal content"/>
        <input type="button" class="addHorizontalContent" value="addhorizontalcontent"/>
        <input type="button" class="addVerticalContent" value="add vertical content"/>
    </div>
</footer>

CSS

body {
    margin: 0;
    position: absolute;
    display: table;
    height: 100%;
    width: 100%;
}
header {
    background-color: red;
    overflow-x: scroll;
}
section {
    background-color: green;
    display: table-row;
    height: 100%;
    width: 100%;
}
.wrapperA {
    height: 100%;
    width: 100%;
    overflow: scroll;
}
footer {
    background-color: blue;
}
.wrapperB {
    max-width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}

JavaScript

$(".addHorizontalContent").click(function(){
    $(this).parent().append($(this).attr("value"));
});

$(".addVerticalContent").click(function(){
    $(this).parent().append("<br/>vertical content");
});