JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<div class="incident-banner">
    <div class="text">Total</div>
    <div class="incident-container">
        <div class="incident">120</div>
        <div class="frequency">per month</div>
    </div>
</div>

CSS

.incident-banner {
    display: inline-table;
    color: white; background: lightblue;
    margin-top: 20px; width: 100%; height: 75px;
}

.text {
    display: table-cell; vertical-align: middle; padding: 10px 20px;
}
    
.incident-container {
    display: table-cell; vertical-align: middle; text-align: right;
    padding: 10px 20px;
}
    
.incident {
    display: inline-block; vertical-align: baseline; font-size: 40px;
} 

.frequency {
    display: inline-block; vertical-align: baseline;
    font-size: 12px;
}