JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<div class="grid">
    <div class="col fluid">
        <h2>Fluid column</h2>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    </div>
    <div class="col fixed">
        <h2>Fixed column - 400px</h2>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
        <p><a href="http://codepen.io/chriscoyier/pen/qazmI">Developed by Chris Coyier</a></p>
    </div>
    <div class="col fluid">
        <h2>Fluid column</h2>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    </div>
</div>

CSS

.grid {
    display: -webkit-flex;
    display: flex;
}
.col {
    background: #ddd;
    padding: 30px;
}
.fluid {
    flex: 1;
}
.fixed {
    background: #ffa;
    width: 400px;
}