JSFiddle - React, Tailwind, and code Playground
HTML
<div class="money_boxesRow">
<div class="panel-i">
<div class="panel-i-label">
One Off Charge
</div>
<span>
£ <span id="total_one_off_charge">0.00</span>
</span>
</div>
<div class="panel-i">
<div class="panel-i-label">
Monthly Charge
</div>
<span>
£ <span id="total_monthly_charge">0.00</span>
</span>
</div>
<div class="panel-i">
<div class="panel-i-label">
Monthly Charge Total
</div>
<span>
£ <span id="total_lease">0.00</span>
</span>
</div>
<div class="panel-i so_hide_commissions" style="display: none;">
<div class="panel-i-label">
Commission Total
</div>
<span>
£ <span id="total_commission">0.00</span>
</span>
</div>
</div>
CSS
.money_boxesRow{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
align-items: stretch;
}
.panel-i{
position: relative;
margin: 4px 0;
text-align: right;
border: 1px solid;
border-right: none;
min-height: 76px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px 10px 0;
-webkit-flex: 1 1 30%;
-moz-flex: 1 1 30%;
-ms-flex: 1 1 30%;
flex: 1 1 30%; /* flex-grow flex-shrink, flex-basis */
}
.panel-i:not( [style*="display: none"]):last-child{
border-right: 1px solid;
}
.panel-i-label{
text-transform: uppercase;
font-size: 1.4em;
}
.panel-i > span{
font-size: 3.2em;
display: block;
font-family: 'PT sans narrow';
font-weight: bold;
}