CSS Dynami c Путь рядом с текстом

Question

Я создал страницу с 3 разделами, которые имеют заголовок и тело. Как я могу создать линию / путь, который идет рядом с текстовой строкой на следующем рисунке:

Синие секции - это пробел, который я пропустил bootstrap с идеей, что его следует использовать для помещения в строку. Но поскольку основной текст - это dinami c, линия / путь должна быть высотой тела.

Как лучше всего подойти к этому?

Вот JSFiddle: https://jsfiddle.net/prozik/zvqn3be9/17/

---

Вот как одна секция структурирована в HTML:

<section class="about-three add-margin-bottom">
<div class="container">
  <div class="row">
    <div class="col-xl-8 col-sm-12 about-title">
      <div class="about-pre-sub"> Heading 3 </div>
      <h1> <span class="bold-text"> Title 3 </span> </h1>
    </div>
    <div class="col-xl-4 col-sm-12 bg-primary"> 
      <!-- space for trace maybe -->  
    </div>
  </div>
  <div class="row">
    <div class="col-xl-9 col-sm-12 about-sub">
      We gather a team of exceptional IT professionals to guide you through the process of project definition,
      design,
      development, testing and application.
    </div>
    <div class="col-xl-3 col-sm-12 bg-primary"></div>
  </div>
  <div class="row small-padding-top">
    <div class="col-xl-11 col-sm-12">
      <div class="row">

        <div class="col-xl-1 col-sm-12">
          <div class="about-one-logo"> logo </div>
        </div>
        <div class="col-xl-11 col-sm-12 about-one-details">
          It is a long established fact that a reader will be distracted by the readable content of a page when
          looking
          at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of
          letters,
          as
          opposed to using 'Content here, content here', making it look like readable English. Many desktop
          publishing
        </div>
      </div>
    </div>
    <div class="col-xl-1 col-sm-12 bg-primary"></div>
  </div>
</div>

Answer 1

Вы можете удалить класс add-margin-bottom и применить SVG фон внутри псевдоэлемента .container::after.

SVG имеет 2 простых кривых Безье (которые вы можете адаптировать по мере необходимости. предпочитайте ) и для каждого 2n сечения вам нужно повернуть ось Y псевдоэлемента (чтобы фон перевернулся)

section:not(:last-of-type) .container::after {
    height: 230px;
    content: "";
    display: block;
}

@media all and (min-width: 1200px) {

   .container::after {
      background: url('data:image/svg+xml;utf8, <svg viewBox="0 0 1200 250" 
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M 1190 0 S1190 125, 1065 125 H 125 S10 125, 10 250" 
                    stroke="%23007bff" stroke-width="10" fill="none"/></svg>') 
                    0 0 no-repeat;
    }

    section:nth-child(2n) .container::after {
       transform: rotateY(180deg);
    }  
}

---

примечание: я завернул весь код в Медиа-запрос, поскольку ваши блоки видны, когда область просмотра имеет ширину не менее 1200px.

JsFiddle Fork

---

Результат