JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

This is fine:
<div class="app-content">
    <div class="main"></div>
    <div class="secondary"></div>
    <aside></aside>
</div>
This is the same DOM, but with content inside one of the boxes. Not fine:
<div class="app-content">
    <div class="main"></div>
    <div class="secondary">
        <p>
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
        </p>
    </div>
    <aside></aside>
</div>

CSS

.app-content {
    display:-webkit-box;
    height:200px;
    width:100%;
}
.main {
    -webkit-box-flex: 3;
    background-color:red;
}
.secondary {
    -webkit-box-flex:2;
    background-color:green;
}
aside {
    -webkit-box-flex:1;
    background-color:yellow;
}