Как сделать вертикальную линию в css

<div class="create-line"></div>

.create-line {
  width: 200px;
  border-top: 3px solid #32a1ce;
}

hr {
  width: 1px;
  height: 200px;
}

<div class="create-line-left">
  Добавим линию слева и справа
</div>

.create-line-left {
  padding-left: 20px;
  /* необходим для формирования позиций линий */
  position: relative;
  /* блок будет занимать ширину по размеру контента в нём*/
  display: inline-block;
}

.create-line-left:before{ 
  content: " ";
  background: #33CCFF;
  width: 2px;
  height: 50px;
  /* линия смещена на 10px слева от текста*/
  left: 10px;
  /* включаем абсолютное позиционирование относительно блока с relative */
  position: absolute;
}

.create-line-left:after{ 
  content: " ";
  background: #333333;
  width: 2px;
  height: 50px;
  /* линия смещена на 10px справа от текста*/
  right: -10px;
  /* включаем абсолютное позиционирование относительно блока с relative */
  position: absolute;
}