I am trying to create a layout that has two sections, one on top of the other, with a line separating them. I would like to use HTML and CSS to create this layout, but I am not sure how to go about it.

I have tried using the display grid to create the line, but it does not seem to be working as expected. I have also tried using the `border` property on the sections, but that also does not seem to be working. Can anyone provide guidance on how to create this layout using HTML and CSS? I would greatly appreciate any help or examples.

this is my code and result

  .qualification__section{
    display: grid;
    grid-template-columns: 0.5fr;
    justify-content: center;

    
  }
  .qualification__content{
    display: none;
  }
  .qualification__content-active{
    display: block;
  }

  
.qualification__data{
      display: grid;
      grid-template-columns: 1fr max-content 1fr;
      column-gap: 1.5rem;

      
    }

    .qualification__title{
      font-size: 1rem ;
      font-weight:500 ;
    }
    .qualification__subtitle{
      display: inline-block;
      font-size: 0.875rem;
      margin-bottom: 1rem;
    }
    .qualification__calender{
      font-size: 0.875rem;
    }
    .qualification__rounder{
      display: inline-block;
      width: 13px;
      height: 13px;
      background-color: var(--title-color);
      border-radius: 50%;
    }
    .qualification__line{
      display: block;
      width: 1px;
      height: 100%;
      background-color: #2a2626;
      transform:translate(6px,-7px) ;
    }

The is result i would like to create it

CodePudding user response：

This is called a timeline and there are many examples on the Internet:

• https://www.w3schools.com/howto/howto_css_timeline.asp
• https://freefrontend.com/css-timelines/

But in general, when you want to create a separating line in CSS you need:

1. Give position: relative to the parent element of the timeline.
2. Make the separating line with Pseudo-elements

An example of a Separating line:

.timeline {
    position: relative;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}