JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <div class="left-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe obcaecati unde blanditiis optio repudiandae, veniam, debitis quam quasi reiciendis quas adipisci temporibus cupiditate. Exercitationem impedit incidunt explicabo culpa nobis quo, possimus tempora, perspiciatis quia est dignissimos quae, at odio cupiditate necessitatibus ab quibusdam aperiam fugiat harum dicta voluptatum neque nostrum.</p>
        </div>
        <div class="right-col">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</body>
</html>

CSS

html{
    height: 100%;
}
body{
    height: 100%;
    margin: 0;
}
.container{
    height: 100%;
    background: #000;
}
.left-col{
    height: 100%;
    width: 40%;
    background: rgba(255,255,255, 0.4);
    float: left;
}
.right-col{
    height: 100%;
    width: 60%;
    background: rgba(255,255,255, 0.6);
    float: right;
}
.left-col p{
    margin-top: 300px;
}
.right-col p{
    margin-top: 800px;
}