JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<div class="container">
    <div class="box blue">
        <h1>Box 1</h1>
        <p>Blub</p>
        <div class="remainder"></div>
    </div>
    
    <div class="box green">
        <h1>Box 2</h1>
        <p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
        <hr>
        <p>Any Ideas?</p>
    </div>
    
    <div class="box yellow">
        <h1>Box 3</h1>
        <p>Here's some more content</p>
        <div class="remainder"></div>
    </div>
</div>

CSS

body {
    width: 100%
}

.container {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.box {
    display: inline-block;
    width: 25%;
    height: 100%;
    border: 3px solid black;
    padding: 2%;
    vertical-align: top;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

.box:after {
    border-bottom: 3px solid black;
    content: '';
}

.remainder {
    height: 100%;
}

h1 {
    background-color: #fff;
    border: 3px solid black;
}
/* Colors */
.blue {
    background-color: blue;
}
.green{
    background-color: green;
}
.yellow{
    background-color: yellow;
}
.red{
    background-color: red;
}