Alternatives to gap property

Question

I'm constructing a simple layout with a title and sub-title. When the two can be displayed on one line without the text wrapping, they should do so with a small amount of spacing between them. In all other cases, the title and sub-title should occupy 100% width. There should be no margin-left on the sub title.

I have created this using Flexbox and the gap property. It renders properly in Firefox:

Here's the code:

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>

Unfortunately, popular browsers such as Google Chrome have failed to implement support for gap used in conjunction with a display: flex layout.

Is there a way I can implement this using e.g. display: inline-block elements and negative margins such that it will work in legacy browsers like Chrome and Internet Explorer?

Answer 1

Instead of gap: .5rem, use margin-right: .5rem on the h1.

h1 {
  margin-right: .5rem;
}

.container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

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

<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>