JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head></head>
<body>
    <div class="parent">
        <div class="child1 child">
            One line text in child1
        </div>
        <div class="child2 child">
            Three line text in child2<br />
            Three line text in child2<br />
            Three line text in child2
        </div>
    </div>
</body>
</html>

CSS

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: 500px;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
 background: red;
 padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}