JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="divContainer">
        <div class="item">
            <div class="itemHeader">hello</div>
            <div class="itemBody">hello</div>
            <div class="itemFlag">.</div>
        </div>
                <div class="item">
            <div class="itemHeader">hello</div>
                    <div class="itemBody">hello</div>
            <div class="itemFlag">.</div>
        </div>
        
        <div class="item">
            <div class="itemHeader">hello</div>
            <div class="itemBody">hello</div>
            <div class="itemFlag">.</div>
        </div>        
        
</div>

CSS

.divContainer{
    display:table;
    width:100%;
    border-spacing:0 5px;
}

.item{
    display:table-row;
    height:45px;
   line-height: 45px;
    text-align: center;
}

.item > div {
  background-color: #ccc;
}

.item > div:first-child {
  border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
}

.item > div:last-child {
  border-radius: 0 10px 10px 0; 
  -moz-border-radius: 0 10px 10px 0;
}

.itemHeader, .itemBody, .itemFlag{
    display:table-cell;
}

.itemHeader{
    width:100px;
}

.itemBody{
    width:150px;
}

.itemFlag{
    width:30px;

}