CSS - сделать начало элемента в середине предыдущего ряда

Question

Я пытаюсь использовать CSS Grid, чтобы иметь div, который начинается в середине div в строке выше.Я хочу, чтобы оба div обернули вокруг текста.Вот чего я пытаюсь достичь:

Как вы видите на картинке, в некоторых случаях субтитры могут быть длиннее заголовкаи иногда нет.

Я пробовал разные способы, но не могу понять.Вот моя последняя попытка.Проблема здесь в том, что (конечно) div «Title» становится шире, поскольку длина субтитров длиннее.

#container{
  border:solid black;
  display:grid;
  grid-template-columns: max-content auto;
  grid-template-rows:1fr 1fr;
}

#title{
  border:solid blue;
  grid-column:1/2;
  grid-row:1/2;
}

#subtitle-container{
  border:solid red;
  grid-column:1/2;
  grid-row:2/3;
  
  display:grid;
  grid-template-columns:50% max-content;
}

#subtitle-text{
  border:solid green;
  grid-column:2/3;
}

<div id="container">
  <div id="title">Title</div>
  <div id="subtitle-container">
    <div id="subtitle-text">This is a rather long subtitle
    </div>
  </div>
</div>

Answer 1

Вот идея, где вы можете создать скрытый элемент с плавающей точкой, который будет выдвигать субтитры.Вы просто делаете элемент с плавающей точкой шириной 50% заголовка, и вам нужно сделать ширину заголовка fit-content.

.container{
  border:solid black;
  margin:5px;
}

.title{
  border-bottom:solid blue;
  width:-moz-fit-content;
  width: fit-content;
}

.title:after {
  content:"";
  float:left;
  width:50%;
  height:2px; /*not needed*/
  background: red; /*not needed*/
  margin-top:10px; /*need to be a small value*/
}
.subtitle-text{
  border:solid green;
  display:inline-block;
}

<div class="container">
  <div class="title">Title</div>
  <div class="subtitle-text">This is a rather long subtitle</div>
</div>

<div class="container">
  <div class="title">Long long Title</div>
  <div class="subtitle-text">Subtitle</div>
</div>

<div class="container">
  <div class="title">Very Long long Title</div>
  <div class="subtitle-text">Subtitle</div>
</div>