Shout out to @TemaniAfif, we've now got it figured out.
Edit: @TayneLeite solution worked as well!

• Apparently, the root problem was the align-items-center in the <div class="post-title-container d-flex align-items-center">.

So just removing that solves the problem. Also, it is better to use padding rather than width when defining the thickness of the <div class="vertical-line"></div>.

Here's my revised code:

<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>

.vertical-line {
    padding: 3px;
    background-color: #007bff; 
    margin-right: 1rem;
}

Shout out to @TemaniAfif, we've now got it figured out.
Edit: @TayneLeite solution worked as well!

• Apparently, the root problem was the align-items-center in the <div class="post-title-container d-flex align-items-center">.

So just removing that solves the problem. Also, it is better to use padding rather than width when defining the thickness of the <div class="vertical-line"></div>, so that its size doesn't readjusts when the text is longer or shorter, or when resized/zoomed in.

Here's my revised code:

<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>

.vertical-line {
    padding: 3px;
    background-color: #007bff; 
    margin-right: 1rem;
}

Shout out to @TemaniAfif, we've now got it figured out.

• Apparently, the root problem was the align-items-center in the <div class="post-title-container d-flex align-items-center">.

So just removing that solves the problem. Also, it is better to use padding rather than width when defining the thickness of the <div class="vertical-line"></div>.

Here's my revised code:

<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>

.vertical-line {
    padding: 3px;
    background-color: #007bff; 
    margin-right: 1rem;
}

Shout out to @TemaniAfif, we've now got it figured out.
Edit: @TayneLeite solution worked as well!

• Apparently, the root problem was the align-items-center in the <div class="post-title-container d-flex align-items-center">.

So just removing that solves the problem. Also, it is better to use padding rather than width when defining the thickness of the <div class="vertical-line"></div>.

Here's my revised code:

<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>

.vertical-line {
    padding: 3px;
    background-color: #007bff; 
    margin-right: 1rem;
}