JSFiddle - React, Tailwind, and code Playground

HTML

<section class="wrapper">
    <section>This column is shorter.</section>
    <aside>This column is taller.<br>New line.</aside>
</section>
<section class="wrapper">
    <section>This column is taller.<br>New line.</section>
    <aside>This column is shorter.</aside>
</section>
<section class="wrapper">
    <section>Equal height columns.</section>
    <aside>Equal height columns.</aside>
</section>
<section class="wrapper" style="height:300px;">
    <section>Manually set height.</section>
    <aside>Manually set height.</aside>
</section>

CSS

.wrapper {
    overflow:hidden;
    margin:10px;
}
.wrapper > section {
    background:red;
    width:50%;
    float:left;
    padding-bottom:100000px;
    margin-bottom:-100000px;
}
.wrapper > aside {
    background:orange;
    width:50%;
    float:left;
    padding-bottom:100000px;
    margin-bottom:-100000px;
}