Как объединить несколько p-тегов, содержащих многострочный текст (рядом) в CSS?

Поскольку ваш div является встроенным элементом, он будет принимать ширину содержимого. Поскольку содержимое пусто, у div не будет ширины. Сделайте стиль отображения вашего div встроенным блоком; Также добавьте следующий стиль для проверки. Это сработало для меня.

div {
    background-color: gray;
    height: 10px;
    width: 10px;
    border-radius: 5px;
}

Вы можете использовать span, чтобы поместить элементы внутрь p. Пример:

<p style = "display: inline">
This is a Lorem ipsum <span class = "circle"></span>
dolor sit amet <span class = "circle"></span>
elit sed do <span class = "circle"></span>
eiusmod tempor incididunt <span class = "circle"></span>
</p>

И в вашем CSS-файле:

.circle {
   background-color:gray;
   height:10px;
   width:10px;
   border-radius:5px;
}

Элементы div должны быть встроенными блоками, чтобы они учитывали размеры.

Этот фрагмент позиционирует их двумя способами: дает элементам p некоторые поля l/r, чтобы создать немного пространства, и перемещает элемент div, чтобы круг выглядел более соответствующим символам.

Все размеры и расположение выполняются с учетом преобладающего размера em, поэтому этот код масштабируется, если он изменяется.

p,
p+div {
  /* for demo */
  font-family: sans-serif;
  font-size: 24px;
}

div {
  background-color: #d8e5e9;
  width: 2em;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(25%);
  margin: 0 0.5em;
}

</style>

<p style = "display: inline">This is a Lorem ipsum</p>
<div style = "display: inline-block"></div>
<p style = "display: inline">dolor sit amet</p>
<div style = "display: inline-block"></div>
<p style = "display: inline">elit sed do</p>
<div style = "display: inline-block"></div>
<p style = "display: inline">eiusmod tempor incididunt</p>
<div style = "display:inline-block"></div>