JSFiddle - React, Tailwind, and code Playground

by sehsarah

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
<!DOCTYPE>
<html>
    <head></head>
    <body>
        <div class="outer">
            <div class="inner">Xxx</div>
            <div class="inner">Xxx</div>
            <div class="inner">Xxx</div>
            <div class="inner">Yydsfdfdsyyyyy</div>
        </div>
    </body>
</html>

CSS

.csscolumns .outer {
    display: inline-block;
    width: auto;
    padding-top: 2px;
    -moz-column-count: 3;
    -moz-column-gap: 2px;
    -webkit-column-count: 2;
    -webkit-column-gap: 2px;
    column-count: 2;
    column-gap: 2px;
}

.no-csscolumns .outer {
    display: inline-block;
    width: auto;
}

.col {
    width: 150px;    
}

.inner {
    border-radius: 4px;
    margin: 2px;
}

div {
    border: 1px solid red;
}