JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <nav>No</nav>
    <article>
        <section>Long content</section>
        <footer>Not long</footer>
    </article>
</div>

CSS

div {
    border: 1px solid black;
    display: flex;
    flex-direction: row;
}

nav {
    background-color: #cff;
}
article {
    width: 100%;
    background-color: #ccc;
}
section {
    background-color: #fcf;
}
footer {
    background-color: #ffc;
}