JSFiddle - React, Tailwind, and code Playground

by gandjyar

HTML

<div class="row">
<div class="row_cell row_cell--top">top</div>
<div class="row_cell">1/3
<h6> This one is got more text than the other. Yet, the height remains the same accross the separate columns <br>
It's got even more text like this one. Why does it have so much text? Nothing really. Just so it's easier to see the alignment options of the other cells...</h6><h6>
</h6></div>
<div class="row_cell">1/3</div>
</div>

CSS

.row {
    display: flex;
    flex-wrap: wrap;
}
.row {
    padding: 15px;
    background: 
    rgba(0,0,0,0.08);
    margin: 8px 0;
}
.row_cell {
    flex: 1;
}
.row_cell--top {
    align-self: stretch;
}
.row_cell, .row_cell--2, .row_cell--3 {
    background: 
    rgba(0,0,0,0.13);
    padding: 10px;
    margin: 5px;
}