Нужно создать 2 вертикальные линии с промежутком под значки

Question

Я посмотрел похожие вопросы по данной теме, но я не нашёл ответа. Я прошёл базовый курс html and css и решил начать верстать макеты. Хотел сверстать такой макет: Макет страницы сайта на Behance . Получилось создать почти всё кроме вертикальных линий, точнее её длины и местоположения. Добавление height в px не даёт результата, однако когда я добавил position: absolite линия удлинилась до нужного мне количества пикселей. Однако, когда я хочу добавить ещё одну линию ниже предыдущей с position: relative то она добавляется не ниже, а правее первой линии. И между этими линиями мне нужно поставить ещё парочку значков-ссылок-иконок. Я не понимаю как мне это сделать. Буду благодарен за любую помощь. Фоновая картинка находится в body без какого-либо позиционирования. Вот код в HTML и CSS:

.line {
       border-left: 2px solid rgb(255, 255, 255); /* Параметры линии */ 
       margin-left: 120px; /* Отступ слева */
       padding-left: 10px; /* Расстояние от линии до текста */ 
       height: 400px;
       position: absolute;
       
       
    }
.line1 {
      border-left: 2px solid rgb(255, 255, 255); /* Параметры линии */ 
      margin-left: 120px; /* Отступ слева */
      margin-top: 600px;
      padding-left: 10px; /* Расстояние от линии до текста */ 
      height: 600px;
      
      
   }
  .footer-col {
      width: 33.3333333333%;
      float: left;
  }
  
  .footer-col a {
      color: white;
  }
  
  .footer-col:last-child {
      text-align: right;
  }
  
  .social-bar-wrap {
      text-align: center;
  }
  
  .social-bar-wrap a {
      padding: 0 5px;
      padding-top: 600px;
      font-size: 25px;
  }
  .social-bar-wrap a:hover {
     color: #feb386;
     transition: 1s;
}

<div> 
      <span class="line"> </span>
      <div class="footer-col">
        <div class="social-bar-wrap">
          <a title="Facebook" href="https://www.facebook.com/dmitry.dak.773?lst=100025290463508%3A100025290463508%3A1523119365" target="_blank"><i class="fab fa-facebook-square"></i></a>
          <a title="YouTube" href="https://www.youtube.com/channel/UCv5_zPLgq8dKll71BnNPqhw?view_as=subscriber" target="_blank"><i class="fab fa-youtube "></i></a>
          <a title="Instagram" href="https://www.instagram.com/dmitrii_dak/" target="_blank"><i class="fab fa-instagram"></i></a>
          <a title="VK" href="https://vk.com/amateurcreativity2" target="_blank"><i class="fab fa-vk"></i></a>
          <a title="Behance" href="https://www.behance.net/kowalenckodmitrii" target="_blank"><i class="fab fa-behance-square"></i></a>
          <a title="OK" href="https://ok.ru/profile/591046965549" target="_blank"><i class="fab fa-odnoklassniki-square"></i></a>
          <a title="500px" href="https://500px.com/p/kowalenckodmitry2017?view=photos" target="_blank"><i class="fab fa-500px"></i></a>
       </div>
     </div>
     <span class="line1"> </span>
     
   </div>

БЛОГ НА HUSL

Нужно создать 2 вертикальные линии с промежутком под значки

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