JSFiddle - React, Tailwind, and code Playground

by phollome

HTML

<div id="container">
  <div id="text-container">
    <h1>
      Headline
    </h1>
    <p>
      Text Text Text TexText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TexText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TexText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TexText Text Text TexText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TexText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TexText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Tex
    </p>
  </div>
  <div id="bar">
    wfcdwfewfewfewfewf
  </div>

</div>

CSS

body {
  margin: 0;
  padding: 0;
}

div {
  margin: 0;
  padding: 0;
}

#container {
  position: absolute;
  width: 100%;
  min-height: 50%;
  background-color: yellow;
  text-align: center;
  flex-direction: column;
  display: flex;
}

#container > * {
  padding: 10px;
  flex: 1 100%;
}

#text-container {
}

#bar {
  height: 50px;
  background: red;
}