I'm trying to make a vertical line that is responsive to the height of my div-CodePudding

I have my vertical line in the spot that I want it in, but I can't seem to figure out how to get it to be the same height as my divs for my p element and my showtimes. Ideally, the line would resize with the elements when the user resizes the page. I'm new to coding, and I'm sure this is an easy fix, but I've exhausted the resources that I've been using to try and figure it out.

.wrapper {
    max-width: 2400px;
    margin: 0 auto;
}

h3{
    font-family: fino;
    color: #BF2035;
    text-align: center;
    font-size: 6em;
    padding: 25px 25px 40px 25px;
}

.showtimes{
    width: 50%;
    
}

p{
    font-family: bookmania, serif;
    font-weight: 400;
    font-size: 3em;
    font-style: normal;
    text-align: center;
    width: 50%;
    padding: 40px;
}

.dates{
    font-family: bookmania, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3em;
    display: list-item;
    text-align: center;
    list-style: none;
    padding-left: 0%;
    padding-right: 65px;
}

.vl {
    border-left: 6px solid black;
    height: 50%;
    position: absolute;
    left: 55%;
    margin-left: -3px;
  }

 </div>  
        <section >
            <p>Pages of a Love Manifesto is a devised theatre piece that, at its core, explores love: our definitions of love, how we relate to love, how we can come to know love and be better practitioners of love, etc. Guided by bell hooks narrative, All About Love, this show is a radical deep dive into love (and heartbreak) inspired by personal tales and testimonies.
            </p>

        <div > 
            <h3>Showtimes</h3>
            <ul>
                <li >Friday, April 29th, 8:00pm</li>
                <li >Saturday, April 30th, 8:00pm</li>
                <li >Sunday, May 1st, 8:00pm</li>
            </ul>
        </div>

        <div ></div>

        </section>
    </div>

CodePudding user response：

Use display: flex so that both the divs are aligned properly. flex-direction: row will handle so that both the elements are side by side.

.wrapper {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}

h3{
    font-family: fino;
    color: #BF2035;
    text-align: center;
    font-size: 6em;
    padding: 25px 25px 40px 25px;
}

.showtimes{
    width: 50%;
    border-left: 6px solid black;
    
}

p{
    font-family: bookmania, serif;
    font-weight: 400;
    font-size: 3em;
    font-style: normal;
    text-align: center;
    width: 50%;
    padding: 40px;
}

.dates{
    font-family: bookmania, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3em;
    display: list-item;
    text-align: center;
    list-style: none;
    padding-left: 0%;
    padding-right: 65px;
}

</div>  
        <section >
            <p>Pages of a Love Manifesto is a devised theatre piece that, at its core, explores love: our definitions of love, how we relate to love, how we can come to know love and be better practitioners of love, etc. Guided by bell hooks narrative, All About Love, this show is a radical deep dive into love (and heartbreak) inspired by personal tales and testimonies.
            </p>

        <div > 
            <h3>Showtimes</h3>
            <ul>
                <li >Friday, April 29th, 8:00pm</li>
                <li >Saturday, April 30th, 8:00pm</li>
                <li >Sunday, May 1st, 8:00pm</li>
            </ul>
        </div>

        <div ></div>

        </section>
    </div>

CodePudding user response：

You can use border-right to achieve the same result. If you want the vertical line separately on your p and class showtime's ul you can add the following on each element:

border-right: 5px solid black;

See the snippet below for your reference:

.wrapper {
  max-width: 2400px;
  margin: 0 auto;
}

h3 {
  font-family: fino;
  color: #BF2035;
  text-align: center;
  font-size: 6em;
  padding: 25px 25px 40px 25px;
}

.showtimes {
  width: 50%;
}

.showtimes>ul {
  border-right: 5px solid black;
}

p {
  font-family: bookmania, serif;
  font-weight: 400;
  font-size: 3em;
  font-style: normal;
  text-align: center;
  width: 50%;
  padding: 40px;
  border-right: 5px solid black;
}

.dates {
  font-family: bookmania, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  display: list-item;
  text-align: center;
  list-style: none;
  padding-left: 0%;
  padding-right: 65px;
}

.vl {
  border-left: 6px solid black;
  height: 50%;
  position: absolute;
  left: 55%;
  margin-left: -3px;
}

</div>
<section >
  <p>Pages of a Love Manifesto is a devised theatre piece that, at its core, explores love: our definitions of love, how we relate to love, how we can come to know love and be better practitioners of love, etc. Guided by bell hooks narrative, All About Love,
    this show is a radical deep dive into love (and heartbreak) inspired by personal tales and testimonies.
  </p>

  <div >
    <h3>Showtimes</h3>
    <ul>
      <li >Friday, April 29th, 8:00pm</li>
      <li >Saturday, April 30th, 8:00pm</li>
      <li >Sunday, May 1st, 8:00pm</li>
    </ul>
  </div>

</section>
</div>