<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
 | When an inline box is split, margins, borders, and padding have no visual
 | effect where the split occurs (or at any split, when there are several).
 |   https://www.w3.org/TR/CSS21/visuren.html#inline-formatting
 -->
<html>
  <head>
    <style>
      .containing-block {
        width: 15rem;
        display: inline-block;
      }
      .text-block {
        color: white;
        background-color: blue;
        margin-left: 0.5rem;
        font-family: Roboto;
        font-size: 16px;
      }
      </style>
  </head>
  <body>
    <div class="containing-block">
      <span class="text-block"> BADGE </span> <span class="text-block"> FOO BAR BAZ, 11:00 AM - 7:00 PM </span>
    </div>
  </body>
</html>