JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<link rel="stylesheet" href="https://rawgithub.com/suitcss/arrange/master/arrange.css">
<div style="background:red; height: 10px;"></div>

<div class="Arrange Arrange--equal Arrange--withGutter">
    <div class="Arrange-sizeFit">
        <span class="dev-highlight">
            BBBBBB
        </span>
    </div>
    <div class="Arrange-sizeFit">
        <span class="dev-highlight">
            BBBBBB
        </span>
    </div>
    <div class="Arrange-sizeFit">
        <span class="dev-highlight">
            BBBBBB
        </span>
    </div>
    <div class="Arrange-sizeFit">
        <span class="dev-highlight">
            BBBBBB
        </span>
    </div>
    <div class="Arrange-sizeFit">
        <span class="dev-highlight">
            BBBBBB
        </span>
    </div>
    <div class="Arrange-sizeFit">
        <span class="dev-highlight">
            BBBBBB
        </span>
    </div>
</div>

CSS

.Arrange {
    width: auto;
    min-width: 100%;
    box-sizing: border-box;
}

.Arrange--withGutter {
    margin: 0 -5px;    
}

.Arrange--withGutter > .Arrange-sizeFill,
.Arrange--withGutter > .Arrange-sizeFit {
    padding: 0 5px !important;
}

.Arrange--equal > .Arrange-sizeFill,
.Arrange--equal > .Arrange-sizeFit {
    width: 1%;
}

body {background:gray; margin: 0;}
.Arrange {background: yellow}
.dev-highlight {
    display: block;
    background-color: orange;
}