JSFiddle - React, Tailwind, and code Playground

by Anthony Kong

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: flex;
      float: right;
      vertical-align: middle;
    }
    
      .incident {
        align-self: center;
        text-align: right;
        vertical-align: middle;
        font-size: 40px;

      } 
      .frequency {
        align-self: center;
        width: 75px;
        padding-right: 10px;
        vertical-align: bottom;
        font-size: 12px;

      }