JSFiddle - React, Tailwind, and code Playground

HTML

<h1>example.com</h1>

  <h2>Hauptinhalt</h2>
  <p>Lorem ipsum dolor sit amet.</p>

  <div id="foo">
    <h2>linke Spalte</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

  <div id="bar">
    <h2>rechte Spalte</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

<footer>footer</footer>

CSS

html
{
    position: relative;
}

body
{
    border-left: 200px solid green; /* breite der linken Spalte plus etwas Abstand */
    border-right: 300px solid lightblue; /* breite der rechten Spalte plus etwas Abstand */
    min-width:400px;
    padding:10px;
    position:relative;
}

#foo /* linke Spalte */
{
    left: -160px;
    position: absolute;
    top: 10px;
    width: 120px;
}

#bar /* rechte Spalte */
{
    position: absolute;
    right: -260px;
    top: 10px;
    width: 220px;
}
footer {
    position:relative;
    background:orange;
    margin:20px -310px -20px -210px;
}

JavaScript

document.createElement('footer');