JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="container">
    <header>Header</header>

    <links>Links</links>
    <rechts>Rechts: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</rechts>
    
    
    <footer>footer</footer>
    </div>

CSS

.container {
    height:80vh;
	width: 300px;
    display: grid;
    grid-template-rows: 25px 10fr 25px;
    grid-template-columns: 40% 60%;
	overflow:hidden; 
}

.container header {
    background:#EAEAEA;
    grid-column-start:1;
    grid-column-end:3;
    grid-row-start:1;
    grid-row-end:2;
}

.container links {
    background:#FFFFFF;
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:2;
    grid-row-end:3;
}

.container rechts {
    background:#FFFFFF;
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:2;
    grid-row-end:3;
}

.container footer {
    background:#EAEAEA;
    grid-column-start:1;
    grid-column-end:3;
    grid-row-start:3;
    grid-row-end:4;
}