CSSのインラインブロックの問題

Question

私は1行のセクションnew-setstion、インラインブロックのあるユーザーセクションに揃えようとしていますが、テキストを置くと、それらは分岐します。

これは私のCSSコードです。提案や批判があれば、それらを共有してください。私が正しくあなたの質問を理解している場合、https://jsfiddle.net/oqvzraxs/：

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

Answer 1

である私は、あなたがこのような何かをしたいと思います。

私はdisplay: inline-flex

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