如何對齊由分隔符分隔的 div 中的文本

Question

所以我正在為我的副項目試用 angular 材料分隔器，但在對齊文本時遇到了一些問題

正如您從圖片中看到的那樣，右側的文本沒有放置在垂直線旁邊，而是放置在垂直線和左側文本的下方。

HTML 代碼：

<section class="about" id="about">
<div class="content">
    <div class="titleContent">
        <h2> Title Here </h2>
    </div>
    <mat-divider [vertical]="true"></mat-divider>
    <div class="textContent">
        <p> Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum
            Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum
            Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum
        </p>
    </div>
</div>

CSS：

section{
    padding: 30px 50px;
}

.about{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.about .content{
    min-width: 800px;
}

.about .content mat-divider{
    border: 2px;
    border-style: solid;
    height: 100px;
    width: 0px;
    position: inherit !important;
    vertical-align: middle;
    display: inline-flex;
}

.about .content .titleContent > h2{
    max-width: 200px;
}

.about .content .titleContent{
    display: inline-flex;
    margin-right: 20px;
}

.about .content .textContent{
    overflow: auto;
}

我嘗試在使用谷歌瀏覽器進行修改時進行對齊，但它沒有用，因為我對前端的工作原理知之甚少。

任何幫助表示贊賞！

Answer 1

只給 .content 類顯示 flex

 .content{
   display:flex;
 }

Answer 2

在您的 CSS 文件中添加以下代碼

.titleContent {
        border-bottom:5px solid;
    }