Как зафиксировать данные блоки, чтобы не было разрывов?

Question

[aliasmark]

Напротив оранжевых круглых пунктов текст / цифры. Проблема в том, что если размер текста по высоте превосходит пункт или состоит из нескольких строк, то происходит смещение как в случае с 3-м пунктом.

.block {
        width: 400px;
        border: 2px solid #F3641E;
        border-radius: 0.5vw;
        padding-top: 20px;
        padding-bottom: 20px;
}
.krug, .ryadomText {
        display: inline-block;
 }
.krug {
        background-color: #F3641E;
        width: 2.4vw;
        height: 2.4vw;
        border-radius: 50%;
        vertical-align: -0.75vw;
        margin-left: 1vw;
}
.ryadomText {
        font-size: 1.0vw;
        padding-left: 0.5vw;
        color: #004B80;
}
.ryadomText.fellOut {
        font-size: 2.5vw;
}
.vBar {
        background-color: #F3641E;
        width: 0.2vw;
        height: 1.5vw;
        margin-left: 2vw;
    }

<div class="block">
<div class="krug"></div><div class="ryadomText">1</div>
<div class="vBar"></div>
<div class="krug"></div><div class="ryadomText">2</div>
<div class="vBar"></div>
<div class="krug"></div><div class="ryadomText fellOut">3</div>
<div class="vBar"></div>
<div class="krug"></div><div class="ryadomText">4</div>
</div>

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

Comments

[Сергей delphinpro]

Было бы неплохо увидеть на картинке, что у вас получается, и что вы хотите.

[aliasmark]

Сергей delphinpro,
То что должно получиться
Сейчас так:

[Сергей delphinpro]

aliasmark,
https://yandex.ru/search/?text=css+vertical+timeline
https://freefrontend.com/css-timelines/

Answer 1

[Сергей delphinpro]

Вы рассматриваете точки, линии и содержимое, как одтельные элементы.
Попробуйте увидеть блочную структуру

типа такого

Один элемент - один блок. Внутри блока - содержимое и точка. У точки - два псевдоэлемента вверх и вниз большой высоты (к примеру 100vh) с абсолютным позиционированием относительно нее.
Чтобы линии не было видно за пределами блока, к блоку применяется обрезка (overflow:hidden)