title: How to make a gap between two DIV within the same column
body: <p>I have two paragraphs. The two paragraphs are located in the same column. Now my question is I need to make the two paragraphs in two separate boxes, down each other. In other words, gap between two boxes coming down each other.</p>
  
  <p>HTML Code</p>
  
  <pre><code>    &lt;div class="sidebar"&gt;
  
                  &lt;div class="box1"&gt;
                      &lt;p&gt; 
                      Text is here
                      &lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="box2"&gt;
                      &lt;p&gt; 
                      Text is here 
                      &lt;/p&gt;
                  &lt;/div&gt;
  
       &lt;/div&gt;
  </code></pre>
  
  <p>My CSS Code is </p>
  
  <pre><code>.sidebar {
      background: red;
      margin: 10px;
      padding: 0 7px 0 7px;
      width: 400px;
      border-radius: 10px;
  }
  
  .box1 {
      display: block;
      padding: 10px;
      margin-bottom: 30px;
      text-align: justify;
  }
  
  .box2 {
      display: block;
      padding: 10px;
      text-align: justify;
  }
  </code></pre>
  
  <p>Like here
  <img src="https://i.stack.imgur.com/pk1ps.jpg" alt="enter image description here"></p>