如何对齐由分隔符分隔的 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;
    }