JSFiddle - React, Tailwind, and code Playground
HTML
<!-- method 1 -->
<div class="ex1-wrap">
<div class="grids" ></div><!--
--><div class="grids" ></div>
</div>
<!-- method 2 -->
<div class="ex2-wrap">
<div class="innerwrap" >
<div class="grids" ></div><!--
--><div class="grids" ></div>
</div>
</div>
<!-- method 3 -->
<div class="ex3-wrap">
<div class="grid-wraps" >
<div class="grid" >
</div>
</div><!--
--><div class="grid-wraps" >
<div class="grid" >
</div>
</div>
</div>
CSS
.ex1-wrap {
background-color: #d6d4d4;
text-align: center;
margin-bottom: 20px;
}
.ex1-wrap .grids {
background-color: #b1efe7;
display: inline-block;
width: 100px;
min-height: 40px;
}
.ex1-wrap .grids:first-child {
margin-right: 10px;
}
.ex2-wrap {
background-color: #d6d4d4;
display: table;
width: 100%;
margin-bottom: 20px;
}
.ex2-wrap .innerwrap {
display: table-cell;
text-align: center;
width: 100%;
}
.ex2-wrap .grids {
background-color: #f9833e;
width: 100px;
min-height: 40px;
display: inline-block;
}
.ex2-wrap .grids:first-child {
margin-right: 10px;
}
.ex3-wrap {
background-color: #d6d4d4;
text-align: center;
}
.ex3-wrap .grid-wraps {
display: inline;
}
.ex3-wrap .grid {
width: 100px;
background-color: #fcb3f5;
min-height: 40px;
display: inline-block;
margin-right: 10px;
}
JavaScript
/*
*1 method
>> set grids display: inline-block ,
instead of float.
>> add comment in between them, to avoid browser in consider space
between both tags.
>> finally set parent tag( wrap ) text-align center
*2 method
>> set wrap display: table;
>> give property display: table-cell; & text-align: center;
>> set grids display: inline-block;
*3 method
>> set wrap display: table;
>> give property display: inline; to .grid-wraps
>> set grids display: inline-block;
*/