如何使博客文章中的段落在同一行开始

Question

无论标题中有多少行，段落内容应始终在同一行开始。帖子信息（Clarkson Smiles 和日期）、标题和内容都在同一个容器中。

我正在使用 Elementor Pro，由于它无法使内容始终在同一行开始，因此我尝试使用 CSS。 我的代码不起作用。请帮忙。谢谢

.post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.post-content {
    flex-grow: 1;
}

另请参阅此示例网站 - https://torontonorthperiodontics.ca/blogs/

Answer 1

给出两行中每个标题的最小高度。使用该集的行夹后，所有标题和内容都从一行开始。

.card-item {
    display: flex;
    column-gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.card-item .item {
    border: 1px solid;
    padding: 10px 20px;
}

.card-item .item h3 {
    min-height: 44px;
}

<div class="card-item">
    <div class="item">
        <h3>Lorem ipsum dolor sit amet Lorem</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="item">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="item">
        <h3>Lorem ipsum dolor sit amet Lorem</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>