header border maken met twee secties rood 3em en wit 2em?

hallo,

ik ben aan het werken met undescores ik heb een border gemaakt met deze code:

.site-branding {
    background-color: #ff0000;
    height: 5em;
  margin: auto 3em;
}

het kan ook met

.site-header {
background-color: #ff0000;
    height: 5em;
margin: auto  3em;
 }

maar ik wil eerste 3em van de hoogte van de border red zijn en de rest 2em wit . eigenlijk ik denk het moet een container zijn.
wat is de beste manier om deze waar te maken met rekening houden voor de oude browsers? ik heb een voorbeeld gevonden in google :
https://dealer.bmw.nl/fbreeman-rotterdam/nl_NL/index.html als u kijkt hier dan u begrijpt wat ik bedoel!!

dank u wel
johannes