CSS Inline Flex and Paragraph Wrapping

Question

How do you get inline flex to wrap to the same line as the last line of a multi-line tag? I believe it sees the 100% width h1 tag so it is breaking to go under it, but is there a way to have it flow to the white space beside the h1?

On screens where the <h1> has to wrap to a second line, the .post-meta appears on the line directly after the <h1> instead of wrapping to be next to the text.

.post {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 10px;
}

.post-title {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.post-meta {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

<div class="post">
  <h1 class="post-title"><a href="#">A Long Post Title but not too long to be obnoxious</a></h1>
  <div class="post-meta">
    <div class="post-date">11 November 2022</div>
    <div class="post-category"><a href="#">Writing, Religion</a></div>
  </div>
</div>

Answer 1

Don't overuse flexbox, you don't need it here and you cannot achieve what you want with it.

.post-title {
  display: inline;
}

.post-meta {
  display: inline-block;
  vertical-align: middle;
}

<div class="post">
  <h1 class="post-title"><a href="#">A Long Post Title but not too long to be obnoxious</a></h1>
  <div class="post-meta">
    <div class="post-date">11 November 2022</div>
    <div class="post-category"><a href="#">Writing, Religion</a></div>
  </div>
</div>