title: On hovering first child component is extending downward while other component are extending upward
body: <p>Here is my code:</p>
  <p>HTML</p>
  <pre><code>&lt;!-- .our-service-section --&gt;
          &lt;section class=&quot;our-service-section&quot; style=&quot;background-image: url('assets/img/our-service-bg.png');&quot;&gt;
            &lt;div class=&quot;container-fluid&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-md-12&quot;&gt;
                  &lt;h2 class=&quot;section-title text-center&quot;&gt;
                    Our Services
                  &lt;/h2&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;container-fluid service-box-container&quot;&gt;
                  &lt;div class=&quot;service-box-item&quot;&gt;
                      &lt;div class=&quot;sbi-title&quot;&gt;
                          &lt;h3&gt;Panel Repair&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;sbi-description&quot;&gt;
                          &lt;p&gt;
                            We specialise in vehicle accident repairs, collision repairs and vehicle
                            spray painting.
                          &lt;/p&gt;
                          &lt;div class=&quot;read-more-link&quot;&gt;
                            &lt;a href=&quot;#&quot; class=&quot;ks-btn ks-btn-light&quot;&gt;
                              &lt;span class=&quot;arrow-dark&quot;&gt;Learn More&lt;/span&gt;
                            &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;service-box-item&quot;&gt;
                    &lt;div class=&quot;sbi-title&quot;&gt;
                      &lt;h3&gt;Service Title&lt;/h3&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;sbi-description&quot;&gt;
                      &lt;p&gt;
                        We specialise in vehicle accident repairs, collision repairs and vehicle
                        spray painting.
                      &lt;/p&gt;
                      &lt;div class=&quot;read-more-link&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;ks-btn ks-btn-light&quot;&gt;
                          &lt;span class=&quot;arrow-dark&quot;&gt;Learn More&lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;service-box-item&quot;&gt;
                    &lt;div class=&quot;sbi-title&quot;&gt;
                      &lt;h3&gt;Service Title&lt;/h3&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;sbi-description&quot;&gt;
                      &lt;p&gt;
                        We specialise in vehicle accident repairs, collision repairs and vehicle
                        spray painting.
                      &lt;/p&gt;
                      &lt;div class=&quot;read-more-link&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;ks-btn ks-btn-light&quot;&gt;
                          &lt;span class=&quot;arrow-dark&quot;&gt;Learn More&lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;service-box-item&quot;&gt;
                    &lt;div class=&quot;sbi-title&quot;&gt;
                      &lt;h3&gt;Service Title&lt;/h3&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;sbi-description&quot;&gt;
                      &lt;p&gt;
                        We specialise in vehicle accident repairs, collision repairs and vehicle
                        spray painting.
                      &lt;/p&gt;
                      &lt;div class=&quot;read-more-link&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;ks-btn ks-btn-light&quot;&gt;
                          &lt;span class=&quot;arrow-dark&quot;&gt;Learn More&lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;service-box-item&quot;&gt;
                    &lt;div class=&quot;sbi-title&quot;&gt;
                      &lt;h3&gt;Service Title&lt;/h3&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;sbi-description&quot;&gt;
                      &lt;p&gt;
                        We specialise in vehicle accident repairs, collision repairs and vehicle
                        spray painting.
                      &lt;/p&gt;
                      &lt;div class=&quot;read-more-link&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;ks-btn ks-btn-light&quot;&gt;
                          &lt;span class=&quot;arrow-dark&quot;&gt;Learn More&lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/section&gt;
          &lt;!-- /.our-service-section --&gt;
  </code></pre>
  <p>And, here is my CSS:</p>
  <pre><code>/**********************
     OUR SERVICE SECTION
  ***********************/
  .our-service-section .main-container{
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      color: #ffffff;
  }
  .service-box-item{
      border-top: 1px solid #5C5D62;
      padding: 30px 15px;
      text-align: center;
  }
  .service-box-item .sbi-title h3{
      line-height: 36px;
      margin-top:20px;
      margin-bottom: 20px;
  }
  .service-box-item .sbi-description{
      display: none;
  }
  .service-box-item .sbi-description p{
      line-height: 24px;
  }
  .sbi-description .read-more-link{
      padding-top: 15px;
  }
  .service-box-item:hover{
      justify-content: center;
  }
  .service-box-item:hover .sbi-description{
      display: inline-block;
  }
  @media (min-width: 992px) {
      .service-box-container{
          border-top: 5px solid #5C5D62;
          display: flex;
          justify-content: space-between;
          height: 500px;
      }
      .service-box-item{
          display: flex;
          padding: 60px 30px;
          justify-content: flex-end;
          flex-direction: column;
          flex-basis: 20%;
      }
      .service-box-item:not(:first-child){
          border-left: 1px solid #5C5D62;
      }
  }
  
  </code></pre>
  <p>To make it show exactly how it looks I am also sharing this <a href="https://jsfiddle.net/f3ct4pyv/" rel="nofollow noreferrer">jsfiddle link</a></p>
  <p><strong>Here, please note that, you must be looking in screen width greater or equal to 992px</strong></p>
  <p>When I hover on <code>service-box-item</code> second child or any other child except first one, it is extending upward, (there will be no shift in screen viewing point).</p>
  <p><a href="https://i.stack.imgur.com/PiMUi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PiMUi.png" alt="enter image description here" /></a></p>
  <p>But if I hover,over first child, it is extending toward downside, which looks weird, how could I fix it?</p>
  <p><a href="https://i.stack.imgur.com/QVJJL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QVJJL.png" alt="enter image description here" /></a></p>
  <p>This is what actually looks while hovering.</p>
  <p><a href="https://i.stack.imgur.com/cI6gt.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cI6gt.gif" alt="enter image description here" /></a></p>