Css 如何在一行上定位两个块项目

我尝试在一行部分上对齐新设置，用户部分与内联块对齐，但当我放置文本时，它们会发散

这是我的css代码，如果你有更好的建议或批评，请分享

.page-content {
        margin: 0 auto;
        text-align: center;
    }
    div.news-section {
        display: inline-block;
        max-width: 500px;
        min-width: 200px;
        background-color: #fff;
        word-wrap: break-word;
        text-align: left;
    }
    div.user-section {
        display: inline-block;
        max-width: 300px;
        min-width: 200px;
        background-color: #fff;
        word-wrap: break-word;
        text-align: left;
    }

这是我的html代码

<div class="page-content">
  <div class="news-section">
    <div class="news-section-header">
        <h2>News</h2>
     </div>
        <!-- content -->
  </div>
<div class="user-section">
  <div class="user-section-header">
     <h2>User section</h2>
   </div>
<form  class="user-login-form" method="POST">
    <div><input type="email" name="user-name" placeholder="John-Doe@mail.com" /></div>
    <div><input type="password" name="user-pass" placeholder="*****" /></div>
    <div><input type="submit" name="sub-button" value="Login"/></div>
    </form>
            <!-- another div content -->
</div>

新闻
用户部分

如果我正确理解了你的问题，我想你想要这样的东西：

我在

中添加了
display:inline flex
。页面内容

.page-content {
    display: inline-flex;
    margin: 0 auto;
    text-align: center;
}

---

显示HTML。假设

.news节、.user节{vertical align:top；}

已经解决了这个问题。顺便说一句，这是“新闻”，而不是“新的”。谢谢你的回答是的

{vertical align:top；}

也很有效。谢谢你给我的回复，以及你的perches future版本。