JSFiddle - React, Tailwind, and code Playground

by ginader

HTML

<h2>divs work fine with display:table:</h2>
<div class="table">
        <div class="col">
            bla
        </div>
        <div class="col">
            bla
        </div>
        <div class="col">
            bla
        </div>
        <div class="col">
            bla
        </div>
</div>
<h2>buttons should work with display:table but don't:</h2>
<div class="table">
        <button class="col">
            bla
        </button>
        <button class="col">
            bla
        </button>
        <button class="col">
            bla
        </button>
        <button class="col">
            bla
        </button>
</div>
<h2>workaround for buttons using flexbox:</h2>
<div class="box">
        <button class="col">
            bla
        </button>
        <button class="col">
            bla
        </button>
        <button class="col">
            bla
        </button>
        <button class="col">
            bla
        </button>
</div>
<h2>workaround with extra markup:</h2>
<ul class="table">
    <li class="col"><button>bla</button></li>
    <li class="col"><button>bla</button></li>
    <li class="col"><button>bla</button></li>
    <li class="col"><button>bla</button></li>
</ul>

CSS

.table{
    display:table;
    width: 100%;
    border:1px solid red;
}
.table .col{
    display:table-cell;
    webkit-appearance:none;
}
.col{
    border:1px solid green;
    text-align: center;
}


/* Switching to Flexbox for Webkit and Mozilla */

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .box{
        display: -webkit-box;
    }
    .box .col{
        display: block;    
        margin: 0;    
        -webkit-box-flex: 1;
    }
}
@media screen and (min--moz-device-pixel-ratio:0) {
    .box{
        display: -moz-box;
    }
    .box .col{
        display: block;    
        margin: 0;    
        -moz-box-flex: 1;
    }
}

/* Extra Markup solution */

li button{
    width:100%;
    height:100%;
}
li.col{
    border:none;
}
li.col button{
    border:1px solid green;
    display:block;
}