JSFiddle - React, Tailwind, and code Playground

by tomboliu

HTML

<div id="parent">
    <div class="children borderGreen sameHeight">正常狀況下，字多的 div，高度會比較高，但這樣版面會很怪，所以必須同一列的 div 都要同高，用計算的方式又很麻煩</div>
    <div class="children borderBlue sameHeight">這個高度比較低</div>
</div>

CSS

div{
    box-sizing:border-box;   
}
.children{
    float:left;
    width:calc(100%/2);
    border:1px solid;
}
.borderRed{
    border-color:red;
}
.borderGreen{
    border-color:green;
}
.borderBlue{
    border-color:blue;
}

#parent{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.sameHeight{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}