JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "main">
    <div id ="sub">One
    </div>
    <div id ="sub">Two
    </div>
    <div id ="sub">Three
    </div>
</div>

CSS

#main{
    border: 2px solid black;
    height:100px;
    width:100%;
    position: relative;
    display:flex;
}
#sub{
    border:1px solid red;
    width: calc(100% / 3);
    height: calc(100% - 40px);
    padding:10px;
    margin : 5px;   
    display:inline-block;
}