Альтернативы свойству разрыва

Я создаю простой макет с заголовком и подзаголовком. Когда эти два элемента могут отображаться на одной строке без переноса текста, они должны делать это с небольшим интервалом между ними. Во всех остальных случаях заголовок и подзаголовок должны занимать 100% ширины. В подзаголовке не должно быть margin-left.

Я создал это с помощью Flexbox и свойства gap. Он правильно отображается в Firefox:

Вот код:

header {
  font-family: sans-serif;
  background-color: rebeccapurple;
  color: #fff;
  padding: 0 5px;
}

.container {
  max-width: 800px;
  width: 100%;
  flex-grow: 1;
  margin-left: auto;
  margin-right: auto;
}

header .container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.5rem;
  align-items: baseline;
}

<header>
  <div class = "container">
    <h1>Long title for the page itself</h1>
    <h2>Subtitle</h2>
  </div>
</header>
<br />
<header>
  <div class = "container">
    <h1>Shorter title</h1>
    <h2>Subtitle</h2>
  </div>
</header>

К сожалению, популярные браузеры, такие как Google Chrome, не смогли реализовать поддержку gap, используемого в сочетании с макетом display: flex.

Есть ли способ реализовать это, например. display: inline-block элементы и отрицательные поля, чтобы он работал в устаревших браузерах, таких как Chrome и Internet Explorer?