JSFiddle - React, Tailwind, and code Playground

HTML

<div class="explained_container">

<div class="explained_c-1">Why does text in this div displace the other divs</div>
<div class="explained_c-2">Div 2</div> 
<div class="explained_c-3">Div 3</div>
    
</div>

CSS

.explained_container{
    width: 604px;
    }

.explained_c-1, .explained_c-2, .explained_c-3 {
	display: inline-block;
	width: 33.3%;
	height: 160px;
	margin-right: -4px;
    vertical-align: top;
	}

.explained_c-1 {
	background: #bbb;  
	}
	
.explained_c-2 {
	background: #ccc;
	}
	
.explained_c-3 {
	background: #ddd;
	}