HTML Выделенное слово в начале забирает все строки

Когда я выделяю слова жирным шрифтом в начале строки, то они забирает себе все строки и не дают остальному предложению зайти под себя. Как сделать так, чтобы слова были жирными, но не влияли на всё предложение?

Как у меня сейчас

Как надо

ul>li .list-title {
  font-size: 22px;
  font-weight: 700;
}

ul>li .list-text {
  font-size: 22px;
  font-weight: 400;
}
<ul>
  <li>
    <span class="list-title">Lokācijas&nbsp;Rīgā: </span>
    <span class="list-text"> Purvciemā, Āgenskalnā, Imantā, Dzirciemā, Bolderājā, Ziepniekkalnā, Vecmīlgrāvī, Sarkandaugavā, Ķengaragā, kā arī Juglā un Botāniskā dārza rajonā.</span>
  </li>
</ul>


Ответы (1 шт):

Автор решения: Kirill

Оказывается, если задать контейнеру текста display: flex;, то все элементы внутри него (включая теги <b>, <strong>, <span>) занимают всю высоту контейнера текста.

Пример:

<p>
    <b>Lorem</b> ipsum dolor, sit amet consectetur adipisicing, elit. Explicabo laudantium ullam vero placeat excepturi <b>asperiores</b> odit, accusantium nostrum earum iste error nulla veniam corrupti obcaecati assumenda deleniti beatae necessitatibus. Vel veniam eius ab a cum, ipsa exercitationem animi, sunt natus culpa deserunt, beatae quasi in recusandae. Ipsa corrupti temporibus hic aliquam officiis neque, alias quisquam rerum officia, odio in quos quod, dolor tempore explicabo, dolores <b>adipisci?</b> Ipsam ab ipsa sunt vero quidem architecto maiores labore in, quae dolor blanditiis libero magni, perspiciatis nam voluptatum repellat. Optio, vel saepe repudiandae blanditiis, ipsa, quasi cumque impedit voluptate obcaecati sed et ducimus quaerat?
</p>

Теперь, если мы зададим p{display: flex;}, то получится:

p{
  display: flex;
}
<p>
    <b>Lorem</b> ipsum dolor, sit amet consectetur adipisicing, elit. Explicabo laudantium ullam vero placeat excepturi <b>asperiores</b> odit, accusantium nostrum earum iste error nulla veniam corrupti obcaecati assumenda deleniti beatae necessitatibus. Vel veniam eius ab a cum, ipsa exercitationem animi, sunt natus culpa deserunt, beatae quasi in recusandae. Ipsa corrupti temporibus hic aliquam officiis neque, alias quisquam rerum officia, odio in quos quod, dolor tempore explicabo, dolores <b>adipisci?</b> Ipsam ab ipsa sunt vero quidem architecto maiores labore in, quae dolor blanditiis libero magni, perspiciatis nam voluptatum repellat. Optio, vel saepe repudiandae blanditiis, ipsa, quasi cumque impedit voluptate obcaecati sed et ducimus quaerat?
</p>

Ещё раз извиняюсь за свою тупость и благодарю всех, кто потратил на меня время :)

→ Ссылка