How to expand div that goes over other divs?

Question

As you can see in demo if you hover on div, it will expand down then you can see more text but there will be a space between two rows.

How can I expand the divs that they go over other divs on second row?

Thanks in advance

Demo you can find here: https://codepen.io/rahman23/pen/LYGyzqb

and HTML/CSS code:

<section>

  <div class="services-grid row">
    <div class="service service1 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-briefcase"></i>
      <h3>My Jobs</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      <a href="#" class="cta">Weiterlesen <i class="fas fa-chevron-right"></i></a>
    </div>

    <div class="service service2 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-book-reader"></i>
      <h3>Further Education</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </p>
      <a href="#" class="cta">Read More<i class="fas fa-chevron-right"></i></a>
    </div>

    <div class="service service3 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-money-check-alt"></i>
      <h3>Salary</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      <a href="#" class="cta">Read More <i class="fas fa-chevron-right"></i></a>
    </div>
    <div class="service service1 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-briefcase"></i>
      <h3>New Opportunities</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a href="#" class="cta">Read More <i class="fas fa-chevron-right"></i></a>
    </div>

    <div class="service service2">
      <i class="fas fa-book-reader"></i>
      <h3>Weiterbildung</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. </p>
      <a href="#" class="cta">Read More <i class="fas fa-chevron-right"></i></a>
    </div>

    <div class="service service3 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-money-check-alt"></i>
      <h3>Salary Adjustment</h3>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
      <a href="#" class="cta">Read More<i class="fas fa-chevron-right"></i></a>
    </div>
  </div>
</section>

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Helvetica, Arial, Geneva, sans-serif;
  margin: 0;
  background: #fff;
  color: #999;
}

a {
  text-decoration: none;
  margin: 1rem 0;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 1px;
}

p {
  font-size: 1rem;
  margin: 0.5rem 0 0 0;
  line-height: 1.5;
}

section {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}

h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #002776;
  font-size: 1.4rem;
  margin: 0.4rem 0;
}

.section-lead {
  margin: 1rem auto 1.5rem;
}

.service a {
  color: #5b7abb;
  display: block;
}

.service h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #56ceba;
  font-size: 1.3rem;
  margin: 0.5rem 0 0.2rem;
}

.services-grid {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: flex-start;
  align-items: flex-start;
  position: relative;
}

.service {
  margin: 15px;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
  -webkit-box-flex: 1;
  flex: 1 1 30%;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #e7e7e7;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.service:hover {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.service i {
  font-size: 3.6rem;
  margin: 1rem 0;
}

.service1 i,
.service1 h4,
.service1 .cta {
  color: #002776;
}

.service1:hover {
  border: 2px solid #002776;
}

.service2 i,
.service2 h3,
.service2 .cta {
  color: #002776;
}

.service2:hover {
  border: 2px solid #002776;
}

.service3 i,
.service3 h3,
.service3 .cta {
  color: #002776;
}

.service3:hover {
  border: 2px solid #002776;
}

.service .cta span {
  font-size: 0.6rem;
}

.service > * {
  flex: 1 1 100%;
}

.service .cta {
  align-self: flex-end;
  margin: 5px 0 0 0;
}

@media all and (max-width: 900px) {
  .services-grid {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}

.cta i {
  font-size: 14px;
  padding-left: 5px;
}
.cta {
  margin-top: 0px;
}
.service p {
  max-height: 50px;
  transition: max-height 0.2s ease-out;
  overflow: hidden;
}

.service:hover p {
  max-height: 150px;
  transition: max-height 0.3s ease-in;
  flex-basis: 100%;
}
.service:hover .service {
  background: #fbf9f9;
}

Answer 1

I stripped it down to basics, but is this what you're after?

div {
  width:400px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  list-style:none;
  position:relative;
}  

li {
  width:100px;
  height:80px;
  margin-bottom:10px;
  position:relative;
}
li > div {
  width:100%;
  height:100%;
    border:1px solid #d9d9d9
}
li:hover > div{
  height:100px;
      position: absolute;
  z-index: 1;
  background-color: #ebebeb;
}

<div>
  <ul>
    <li>
      <div>
        Item
      </div>
    </li>
    <li>
      <div>
        Item
      </div>
    </li>
    <li>
      <div>
        Item
      </div>
    </li>
    <li>
      <div>
        Item
      </div>
    </li>
    <li>
      <div>
        Item
      </div>
    </li>
    <li>
      <div>
        Item
      </div>
    </li>
  </ul>
</div>