title: How to prevent divs of sliding down?
body: <p>I have some divs to slide down clicking on plus sign. But one expanding div expands other. I need only clicked div to push space and expand. I tried to set overflow of wrapper and display. Now i dont now what to do. Can someone help me?  </p>
  
  <p>Codepen ref:  <a href="https://codepen.io/nikolinjho/pen/jONYxmj" rel="nofollow noreferrer">https://codepen.io/nikolinjho/pen/jONYxmj</a>    </p>
  
  <p>html: </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-4 upon"&gt;
  
                  &lt;p class="cust" style=""&gt;Lorem ipsum dolor sit amet
                      &lt;i class="fa fa-plus-circle down" aria-hidden="true"&gt; 
                      &lt;/i&gt;
                  &lt;/p&gt;
                  &lt;div class="hidden slid-own"&gt;
                      &lt;p class="font-6"&gt;– Limited Projects approved per 
                     quarter&lt;/p&gt;
                      &lt;p class="font-6"&gt;– Free base level website hosting, 
                       up to 5 initial revisions prior to launch!&lt;/p&gt;
                      &lt;p class="font-6"&gt;– A great low-cost option for small 
                        businesses &amp; startups&lt;/p&gt;
                      &lt;p class="font-6"&gt;– SEO Optimized &amp; Mobile- 
                     Friendly&lt;/p&gt;
                      &lt;p class="font-6"&gt;– Contains our Google Ads&lt;/p&gt;
  
                  &lt;/div&gt;
                  &lt;p&gt;consectetur adipiscing elit&lt;/p&gt;
  
  
          &lt;/div&gt;
          &lt;div class="col-sm-4 upon"&gt;
  
              &lt;p class="cust" style=""&gt;Lorem ipsum dolor sit amet
                  &lt;i class="fa fa-plus-circle down" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/p&gt;
              &lt;div class="hidden slid-own"&gt;
                  &lt;p class="font-6"&gt;– Limited Projects approved per 
                  quarter&lt;/p&gt;
                  &lt;p class="font-6"&gt;– Free base level website hosting, up 
                 to 5 initial revisions prior to launch!&lt;/p&gt;
                  &lt;p class="font-6"&gt;– A great low-cost option for small 
                   businesses &amp; startups&lt;/p&gt;
                  &lt;p class="font-6"&gt;– SEO Optimized &amp; Mobile-Friendly&lt;/p&gt;
                  &lt;p class="font-6"&gt;– Contains our Google Ads&lt;/p&gt;
  
              &lt;/div&gt;
              &lt;p&gt;consectetur adipiscing elit&lt;/p&gt;
  
  
      &lt;/div&gt;
      &lt;div class="col-sm-4 upon"&gt;
  
          &lt;p class="cust" style=""&gt;Lorem ipsum dolor sit amet
              &lt;i class="fa fa-plus-circle down" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/p&gt;
          &lt;div class="hidden slid-own"&gt;
              &lt;p class="font-6"&gt;– Limited Projects approved per quarter&lt;/p&gt;
              &lt;p class="font-6"&gt;– Free base level website hosting, up to 5 
             initial revisions prior to launch!&lt;/p&gt;
              &lt;p class="font-6"&gt;– A great low-cost option for small 
              businesses &amp; startups&lt;/p&gt;
              &lt;p class="font-6"&gt;– SEO Optimized &amp; Mobile-Friendly&lt;/p&gt;
              &lt;p class="font-6"&gt;– Contains our Google Ads&lt;/p&gt;
  
          &lt;/div&gt;
          &lt;p&gt;consectetur adipiscing elit&lt;/p&gt;
  
  
    &lt;/div&gt;
  
      &lt;/div&gt;
     &lt;/div&gt;
  
  
  
    css:
  
     &lt;style type="text/css"&gt;
      .cust {
  
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
  
      .fa-plus-circle, .fa-minus-circle {
          cursor: pointer;
          color: green;
      }
  
      .upon {
          border: 1px solid #eadddd;
      }
      .upon p {
          text-transform: uppercase;
          font-size: 14px;
          letter-spacing: 2px; 
      }
      .slid-own .font-6{
          font-size: 12px;
          text-transform: lowercase;
      }
      .hidden {
          display: none;
      }
     &lt;/style&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(".down").click(function () {
          console.log($(this).parent().parent())
          $(this).parent().parent().find(".slid-own").slideToggle();
          $(".down").toggleClass("fa-minus-circle ");
  
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>How to handle it?</p>