Hierarchy view - key component base structure.scss

// Simple style for the content of parent & child
p{
  margin: 0;
  background-color: #fff;
  color: #00B9AE;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(#CC8367, 0.22);
}

.hv-item{
    display: flex;
    flex-direction: column;
    margin: auto;
    .hv-item-parent{
      margin-bottom: $bottom-margin;
      position: relative;
      display: flex;
      justify-content: center;      
      &:after{
        position: absolute;
        content: '';
        width: $line-width;
        height: $bottom-margin / 2;
        bottom: 0;
        left: 50%;
        background-color: $line-color;
        transform: translateY(100%);
      }
    }
  .hv-item-children{
    display: flex;
    justify-content: center;
    .hv-item-child{
      padding: 0 15px;
      position: relative;

      &:before, &:after{
        content: '';
        position: absolute;
        background-color: $line-color;
        left: 0;
      }

      &:before{
        left: 50%;
        top: 0;
        transform: translateY(-100%);
        width: $line-width;
        height: $bottom-margin / 2;

      }

      &:after{
        top: -$bottom-margin / 2;
        transform: translateY(-100%);
        height: $line-width;
        width: 100%;
      }

      &:first-child:after{
        left: 50%;
        width: 50%;
      }

      &:last-child:after{
        width: calc(50% + 1px);
      }        

      // for single relationship between one parent & one child
      &:only-child:after{
        width: 0;
      }
    }
  }
}