JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fullheight">
        <div class="leftfloat minfield maxsize">
            <p>hello</p>
        </div>
        <div class="leftfloat maxsize">
            <p>world</p>
        </div>
    </div>

CSS

* {
            border: 1px solid black;
        }

        html,body,.fullheight {
            height: 99%;
            width: 99%;
        }

        table {
            table-layout: auto;
        }
        .minfield {
            max-width: 250px;
            border: 1px solid red;
            overflow: hidden;
        }

        .leftfloat{
            float: left;
        }

        .maxsize{
            height: 99%;
            width: 49%;
        }