JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Diplay Table Test</title>
    <style type="text/css">
        #box_wrapper {
            display: table;
            width: 100%;          
            border-spacing: 20px; 
            background-color: #999;        
        }
        .box_cell {
            display: table-cell;
            padding: 10px;
            text-align: center;        
        }
        .box_cell > div {
            width: 150px; 
            padding: 5px;
            background-color: #CCC;
            border: 1px solid red;         
        }
        .box_cell:nth-child(2) > div {
            width: 40px; 
            padding: 5px;
            background-color: #CCC;
            border: 1px solid red;         
        }
    </style>
</head>
<body>
    <div id="box_wrapper">
        
        <div class="box_cell">
            <div>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.</div>
        </div>
        <div class="box_cell">
            <div>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.</div>
        </div>
        <div class="box_cell">
            <div>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.</div>
        </div>
        <div class="box_cell">
            <div>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.</div>
        </div>
        
    </div>
</body>
</html>