Como você faz com que o flex inline seja agrupado na mesma linha que a última linha de uma tag de várias linhas? Eu acredito que ele vê a tag h1 de 100% de largura, então está quebrando para passar por baixo dela, mas existe uma maneira de fazê-la fluir para o espaço em branco ao lado de h1?
.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>
Em telas onde o tem que quebrar para uma segunda linha, o .post-meta aparece na linha logo após o ao invés de quebrar para ficar próximo ao texto.
Obrigado!