JSFiddle - React, Tailwind, and code Playground

HTML

With squares, Text doesn't show:
<div class="content">
    <span>
        <div class="box"></div>
        <div class="box"></div>
    </span>
    <div class="content-empty">Text</div>
</div>

Without, it does:
<div class="content">
    <span></span>
    <div class="content-empty">Text</div>
</div>

CSS

.content {
    border: 2px dashed #bbb;
    margin-top:20px;
    height: 94px; 
    overflow: hidden;
}
.box {
    width: 80px;
    height: 80px;
    border: 2px solid #444;
    display: inline-block;
    margin: 5px;
    background-color: #eee;
    
}
.content-empty {
    text-align: center;
    vertical-align: middle;
    line-height: 94px;
    font-size: 26pt;
    display: inline-block;
    min-width: 100%;
    background: silver;
}