JSFiddle - React, Tailwind, and code Playground

by okke

HTML

<h1>Without box-sizing:</h1>
<div class=row>
    <div class=col>1</div>
    <div class=col>2</div>
    <div class=col>3</div>
    <div class=col>4</div>
    <div class=col>5</div>
</div>

<h1>With box-sizing</h1>
<div class="row row-css3">
    <div class=col>1</div>
    <div class=col>2</div>
    <div class=col>3</div>
    <div class=col>4</div>
    <div class=col>5</div>
</div>

CSS

.row {
    width: 500px;
    margin: 20px auto;
    padding: 10px;
    background: skyblue;
    overflow: auto;
}
.col { 
    width: 20%; 
    border: 2px solid red; 
    padding: 1em; 
    float: left;
    margin: 0;
    background: silver;
}
.row-css3 .col {
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}