title: How to show div in multiple lines instead one line
body: <p>I have centered the <code>div</code> contents in a wrapper using <code>display:flex</code>. now the problem is the child divs are showing in one line, but I wanted to make it displayed above each other. here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.news-content-inner{
      display: flex; 
      align-items: center; 
      justify-content: center; 
      height: 100%;
      background-color:#cccccc;
      width:300px;
  }
  .news-by-category-items &gt; .news-content-inner &gt; .category-tags{
      display: inline-block; 
      padding: 2px 8px; 
      font-size: 14px; 
      color: #fff; 
      font-weight: bold;
  }
  .news-by-category-items &gt; .news-content-inner &gt; .news-title{
      font-size: 16px; 
      color: #fff; 
      font-weight: bold; 
  }
  .news-by-category-items &gt; .news-content-inner &gt;  .news-date{
      font-size:14px; color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="news-content-inner"&gt;
    &lt;div class="category-tags tag3"&gt;block level text 1&lt;/div&gt;
    &lt;div class="news-title"&gt;block level text 2 &lt;/div&gt;
    &lt;div class="news-date"&gt;block level text 3&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>