<div>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>

HTML {
  font-size: 24px;
}

DIV {
  font-size: 1rem;
}

// Helpers
BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

DIV {
  --stripe-height: 24px;

  background: linear-gradient(
    palegreen, palegreen var(--stripe-height),
    transparent 0, transparent calc(var(--stripe-height) * 2),
    pink 0, pink  calc(var(--stripe-height) * 3),
    transparent 0, transparent  calc(var(--stripe-height) * 4),
    paleturquoise 0, paleturquoise calc(var(--stripe-height) * 5),
    transparent 0, transparent calc(var(--stripe-height) * 6)
  );
  background-size: 100% calc(var(--stripe-height) * 6);
  line-height: 1;
  outline: 1px solid #DDD;
}

P {
  margin: 0;
  text-align: center;
}