title: How to position two block items on a single line
body: <p>I'm trying aligned on one line sections new-setstion, user-section with inline-block but when I put text they diverge.</p>
  
  <p>This is my css code, if you have better suggestions or criticisms please share them.</p>
  
  <pre><code>.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;
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0NyTA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0NyTA.png" alt="it is an image that illustrates the problem"></a></p>
  
  <p>This is my html code</p>
  
  <pre><code>&lt;div class="page-content"&gt;
    &lt;div class="news-section"&gt;
      &lt;div class="news-section-header"&gt;
          &lt;h2&gt;News&lt;/h2&gt;
       &lt;/div&gt;
          &lt;!-- content --&gt;
    &lt;/div&gt;
  &lt;div class="user-section"&gt;
    &lt;div class="user-section-header"&gt;
       &lt;h2&gt;User section&lt;/h2&gt;
     &lt;/div&gt;
  &lt;form  class="user-login-form" method="POST"&gt;
      &lt;div&gt;&lt;input type="email" name="user-name" placeholder="John-Doe@mail.com" /&gt;&lt;/div&gt;
      &lt;div&gt;&lt;input type="password" name="user-pass" placeholder="*****" /&gt;&lt;/div&gt;
      &lt;div&gt;&lt;input type="submit" name="sub-button" value="Login"/&gt;&lt;/div&gt;
      &lt;/form&gt;
              &lt;!-- another div content --&gt;
  &lt;/div&gt;
  </code></pre>