JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt, sem non condimentum faucibus, diam erat aliquam justo, vel pellentesque urna quam a ante. Ut rhoncus sapien eu ante mollis hendrerit. Etiam in enim in arcu ullamcorper vehicula. Integer elementum, velit adipiscing mollis ultrices, justo libero fermentum justo, eu ullamcorper nunc augue vitae massa. Aliquam rhoncus ultrices nibh sed commodo. Donec malesuada, lacus non mattis elementum, purus tellus lacinia sem, lobortis suscipit nisl dolor vitae ipsum. Fusce odio tellus, lacinia eu sagittis euismod, pulvinar eu neque. Phasellus facilisis, leo eget viverra viverra, tortor lorem eleifend metus, ultrices pellentesque enim libero sed turpis.</div>
</div>

CSS

#main {
    width: 500px;
    background-color: #cccccc;
}
#main div {
    float: left;
}
#first {
    width: 100px;
    min-height: 50px;
    height: 100%;
    background-color: blue;
}
#second {
    width: 100px;
    min-height: 50px;
    height: 100%;
    background-color: green;
}
#third {
    width: 300px;
    background-color: red;
}

JavaScript

Необходимо сделать так, чтобы первый и второй блоки были равны по высоте третьему.
    При этом:
    Ни один из блоков не имеет заданной высоты + третий блок всегда имеет контент.
    Таблица не подходит.
    
    OFFTOP: Буду признателен, если ещё подскажите, как пожно сохранить данную структуру, не используя float: left; вообще. У меня с флоатом вечны проблемы, не могу понять альтернативу.
        
    СПАСИБО!