JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
	
	 	<div class="ib child">
	 		<div class="ib red grand-child bord">
                <span>span</span>

			</div>
			
			<div class="ib red grand-child bord">
               <span class="table-cell">span</span>
			</div>
			
			<div class="ib red grand-child bord">
                 <span class="flex">span</span>
			</div>
			
		</div>
		
		
		
		<div class="ib child">
	 		<div class="ib blue grand-child bord">
                <a>a link</a>                
			</div>
			
			<div class="ib blue grand-child bord">
	             <a class="table-cell">a link</a>
			</div>
			
			<div class="ib blue grand-child bord">
	             <a class="flex">a link</a> 
			</div>
			
		</div>
		
		
		
		
		<div class="ib child">
	 		<div class="ib verde grand-child bord">
	             
			</div>
			
			<div class="ib verde grand-child bord">
	 
			</div>
			
			<div class="ib verde grand-child bord">
	 
			</div>
			
		</div>
		
		
	</div>

CSS

div {vertical-align: top;}
.parent {
	margin-left: auto!important;
    margin-right: auto!important;
    max-width: 935px;
    width: 100%;
    margin-top: 90px;
    height: auto;
	
}

.parent .child {
	width: 32%;
	height: 85px;
	 
}

.parent .child .grand-child {
	width: 26%;
	height: 82px;
	
}

.parent .child .grand-child  a{
    text-decoration: none;
    color: #000000;
}

.table-cell {
    display: table-cell;
}

.flex {
    display: flex;
}

.ib {
    display: inline-block;
}

.bord {
    border: 1px solid #BBB;

}

.red {
    background-color: red;

}

.blue {
    background-color: blue;

}

.verde {
    background-color: green;

}