JSFiddle - React, Tailwind, and code Playground

HTML

sample1
<div class="wrapper">
    <div class="item">content</div>
    
    <div class="item">content</div>
    
    <div class="item">content</div>
    
</div>

sample2
<div class="wrapper2">
    <div class="item2">content</div><div class="item2">content</div><div class="item2">content</div>
    
</div>

CSS

.wrapper{
    overflow:hidden; /*make sure the wrapper has no dimension*/
    background:red;
    margin-bottom:10px;
}

.item{
    float:left; 
    width:100px;
    height:100px;
    background:blue;
    margin:10px;
}

.wrapper2{
    background:red;
}

.item2{
    display:inline-block; 
    width:100px;
    height:100px;
    background:blue;
    margin:10px;
}