Секция с линией и текстом по сторонам HTML CSS

Question

Как сделать эту секцию
Посередине полоска с цифрой и слева или справа текст
линия должна занимать высоту текста и отступ до следующей цифры в 48 пикселей
Пробовал через flex и через grid, результатов нет

текущий код

.holder__body {
  display: flex;
  justify-content: center;
}
.holder__items {
  margin: 70px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item-holder {
  position: relative;
  display: grid;
  grid-template-columns: 645px 50px 645px;
}
.item-holder__bar-wrapper {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  grid-column: 2/3;
}
.item-holder__bar {
  width: 4px;
  height: 100%;
  background: #0c3d9a;
  top: 0;
}
.item-holder__number {
  font-weight: 700;
  font-size: 32px;
  line-height: 87%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #0c3d9a;
  border-radius: 50%;
}
.item-holder__text {
  font-weight: 700;
  font-size: 20px;
  line-height: 140%;
  color: #000;
  grid-column: 1/2;
}

<div class="holder__body">

            <div class="holder__items">

               <div class="holder__item item-holder">

                  <div class="item-holder__bar-wrapper">
                     <div class="item-holder__bar"></div>
                     <div class="item-holder__number">1</div>
                  </div>


                  <div class="item-holder__text">Участвовать в управлении обществом в порядке, предусмотренном настоящим
                     Законом и (или) уставом общества;</div>
               </div>

            </div>
         </div>

Answer 1

Это так называемый вертикальный таймлайн. Кусочек Вашего примера. не точь в точь конечно, но думаю замысел вам понятен.

#vertical_list .list_items:after,
#vertical_list .list_items:before {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

#vertical_list {
  max-width: 1200px;
  width: 100%;
  margin: auto;
  position: relative;
  padding: 0;
}

#vertical_list:before {
  content: "";
  width: 3px;
  height: 100%;
  background: blue;
  left: 50%;
  top: 0;
  position: absolute;
}

#vertical_list:after {
  content: "";
  clear: both;
  display: table;
  width: 100%;
}

#vertical_list .list_items {
  margin-bottom: 48px;
  position: relative;
}

#vertical_list .list_items .item_number h1 {
  background: blue;
  color: white;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: -23px;
  left: 50%;
  overflow: hidden;
  margin-left: -23px;
}

#vertical_list .list_items .item-content {
  width: 45%;
}

#vertical_list .list_items:nth-child(even) .item-content {
  float: right;
  text-align: left;
}

#vertical_list .list_items:nth-child(even) .item-content:before {
  content: "";
  right: 45%;
  left: inherit;
}

#vertical_list .list_items:nth-child(odd) .item-content {
  text-align: right;
}

<div id="vertical_list">
  <div class="list_items">
    <div class="item_number">
      <h1>1</h>
    </div>
    <div class="item-content">
      <p>Участвовать в управлении обществом в порядке, предусмотренном настоящим Законом и (или) уставом общества</p>
    </div>
  </div>

  <div class="list_items">
    <div class="item_number">
      <h1>2</h>
    </div>
    <div class="item-content">
      <p>Получать дивиденды</p>
    </div>
  </div>
  <div class="list_items">
    <div class="item_number">
      <h1>3</h>
    </div>
    <div class="item-content">
      <p>Получать информацию о деятельности общества, в том числе знакомиться с финансовой отчетностью общества в порядке, определенном общим собранием акционеров или уставом общества</p>
    </div>
  </div>
  <div class="list_items">
    <div class="item_number">
      <h1>4</h>
    </div>
    <div class="item-content">
      <p>Получать выписки от регистратора общества или номинального держателя, подтверждающего его право собственности на ценные бумаги</p>
    </div>
  </div>
</div>

По возможности смотрите с компьютера, т.к. данный пример нуждается в адаптивности для мобильных устройств. За основу взят пример: https://atuin.ru/blog/vertikalnyj-tajmlajn-na-css/

БЛОГ НА HUSL

Секция с линией и текстом по сторонам HTML CSS

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