JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="column">
            <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">1111111111 1 111111111 111111 111111111 11111</div>
        </div>
        <div class="column">
            <div class="col-xs-12 col-sm-8 col-md-6 col-lg-7">22 2 2222222 2 22222222 222222222222 22</div>
        </div>
        <div class="column">
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3">3333 3 333333 33333 33 3 3 3333 3 3 333333 33333 3333 33333333 333333 33333333 3 33 333333 3 333333 33 33333333 3333 33333 333 3333333 3333 3 3333333333</div>
        </div>
    </div>
</div>

CSS

.container {
    width: 1500px;
}
@media (min-width: 768px) {
    .container .row {
        display: table;
    }
    .column {
        display: table-cell;
        vertical-align: top;
    }
}
.column:nth-child(2) {
    border-left: 1px solid #AAA;
}