JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>This sucks</title>
    <link rel="stylesheet" href="crazy.css" />
</head>
<body>
    <div class="container">
    
    
    <div class="header clearfix">
        <div class="column-1">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus saepe placeat, quam suscipit deserunt quibusdam recusandae, aliquid, minus eos totam sed quis. Nostrum officia reiciendis odit vero blanditiis eos accusamus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed doloribus, suscipit recusandae quo ipsa eligendi non voluptates sunt veniam eius omnis reprehenderit cupiditate architecto placeat ea explicabo error provident distinctio?
        </div>
        <div class="column-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, dolorem repellendus totam impedit molestias, officia eius veritatis commodi mollitia recusandae odit blanditiis iure ad, ex facere dolorum nulla quod perspiciatis quae expedita. Pariatur ullam voluptates nemo perferendis modi, sapiente porro impedit officia officiis enim quis consequatur, natus maiores. Architecto laborum laudantium fuga ad eum numquam suscipit esse eveniet beatae saepe, obcaecati veritatis officia sapiente vitae libero quam reprehenderit voluptate dignissimos? Itaque rem libero iusto officia animi necessitatibus atque quod sed maxime, incidunt, quia eligendi earum numquam. Natus ex minima repudiandae. Delectus quibusdam quam eius id excepturi, impedit deserunt. Quaerat, ut.
        </div>
    </div>
    <div class="content clearfix">
        <div class="column">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, obcaecati quia repudiandae quisquam nisi quidem, natus quaerat dolore nobis recusandae non iusto incidunt, sequi repellat! Dolores officiis error ducimus quaerat?</div>
        <div class="column">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum corporis reprehenderit...

CSS

html {
    height: 100%;
    margin: 0%;
}

.container {
  min-height: 100vh;
   background-image: linear-gradient(to bottom, white, black);
    background-repeat: no-repeat;
}

body {
    margin: 0%;
}

.clearfix::after {
    display: table;
    content: "";
    clear: both;
}

.header {
    margin-bottom: 0.5%;
    border: 1px dashed red;
}

.header .column-1 {
    float: left;
    width: 30%;
}

.header .column-2 {
    float: right;
    width: 30%;
}

.content {
    margin-bottom: 0.5%;
    border: 1px dotted red;
}

.content .column {
    float: left;
    width: 30%;
    margin-right: 5%;
}

.content :last-child {
    margin-right: 0;
}

.footer {
    margin-top: 0.5%;
}