Basically, the only problem left for me is the automatically adjusting height of the line beside the supposed title. I contained the vertical line and the title with a div flex, though I am not certain if the structure itself is even correct or the ideal solution to my case.

Here is what I did:

<div class="post-title-container d-flex align-items-center">
    <div class="vertical-line"></div>
    <h1 class="post-title">
        Lorem ipsum dolor sit amet consectetur adipisicing
    </h1>
</div>

.post-title {
    font-weight: 700;
}

.vertical-line {
    height: (Main Issue Here);
    width: 10px;
    background-color: #007bff; 
    margin-right: 1rem;
}

Basically, the only problem left for me is the automatically adjusting height of the line beside the supposed title. I contained the vertical line and the title with a div flex, though I am not certain if the structure itself is even correct or the ideal solution to my case.

Here is what I did:

.post-title {
  font-weight: 700;
}

.vertical-line {
  height: /* (Main Issue Here) */;
  width: 10px;
  background-color: #007bff;
  margin-right: 1rem;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="post-title-container d-flex align-items-center">
  <div class="vertical-line"></div>
  <h1 class="post-title">
    Lorem ipsum dolor sit amet consectetur adipisicing
  </h1>
</div>

Basically, the only problem left for me is the automatically adjusting height of the line beside the supposed title. I contained the vertical line and the title with a div flex, though I am not certain if the structure itself is even correct or the ideal solution to my case.

Here is what I did:

<div class="post-title-container d-flex align-items-center">
    <div class="vertical-line"></div>
    <h1 class="post-title">
        Lorem ipsum dolor sit amet consectetur adipisicing
    </h1>
</div>

.post-title {
    font-weight: 700;
}

.vertical-line {
    height: 80px;
    width: (Main Issue Here);
    background-color: #007bff; 
    margin-right: 1rem;
}

Basically, the only problem left for me is the automatically adjusting height of the line beside the supposed title. I contained the vertical line and the title with a div flex, though I am not certain if the structure itself is even correct or the ideal solution to my case.

Here is what I did:

<div class="post-title-container d-flex align-items-center">
    <div class="vertical-line"></div>
    <h1 class="post-title">
        Lorem ipsum dolor sit amet consectetur adipisicing
    </h1>
</div>

.post-title {
    font-weight: 700;
}

.vertical-line {
    height: (Main Issue Here);
    width: 10px;
    background-color: #007bff; 
    margin-right: 1rem;
}