How can I align two different-size pieces of text to the left and right while matching baselines?

I am trying to change how the title and tagline are displayed in the Coraline WordPress theme. I want them next to each other, aligned on their baseline, justified left and right. I'm new to CSS.

I managed to figure out a solution, but it doesn't seem to work in Safari 8. What is a robust alternative that works in recent versions of all major browsers?

This is my attempt that works in Chrome and Firefox:

#container {
  width: 400px;
  background: #eee;
  /* This below is the key, doesn't work in Safari 8 */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#title {
  font-size: 32pt;
  background: #aee;
}

#tagline {
  font-size: 12pt;
  background: #eea;
}

<div id="container">
  <div id="title">Site Title</div>
  <div id="tagline">This is the tagline</div>
</div>