**Update (leer mas abajo).**

Estoy realizando esta alineación de divs con respecto a un contenido aparte que esta posicionada detrás de los divs que quiere alinear:

Me explico:

**Div principal:** Este div tiene oculto otro div que se desplaza con una pequeña animación con **Jquery**, si pulsas en la flecha blanca se desplaza su contenido (que es el otro div), igualmente si quieres cerrarlo se oculta si vuelves a pulsar. En Realidad uso Z-index para poder manejar estos 2 elementos.

[![DIV 1][1]][1]
[![Div desplazado][2]][2]


**Ahora me gustaría lograr algo como lo que les muestro en la siguiente imagen.** La cosa es poder posicionar los recuadros tanto el como el con el div con el contenido (siendo este le que esta detras).

Realmente he logrado posicionar los 2 primeros recuadros, pero cuando voy a colocar otros 2 en la siguiente fila, se me descuadran y se desacomoda todo, he intendo colocarlos con contenedor individuales pero no resulta. 

[![logro][3]][3]
Estructura HTML:

  

          <section>
                 <h2>Services</h2>
            <div id="contain" class="contenedor">
            	<div class="contenedorICON">
            			<div class="icon" id="Wirefrime">		
        <i class="fas fa-ruler-horizontal"></i>
            		</div>
    <div class="arrow"><i class="fas fa-sort-down" class="animate"></i>
            </div>
            		<div class="contenedorp">	
            			<div class="parrafo">
            				<h4>Wirefrime</h4>
            	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fugiat quisquam asperiores autem tempore.
            			</div>
            			</div>				
            </div> 
            <div class="contenedorICON"> 
            		<div class="icon" id="Web-Design">
            						<i class="fas fa-ruler-horizontal" id="iconD"></i>
            		</div>
           <div class="arrow"><i class="fas fa-sort-down" class="animate"></i>
            		</div>
            		<div class="contenedorp">
            			<div class="parrafo">
            				<h4>Web design</h4>
            				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fugiat quisquam asperiores autem tempore.
            			</div>							
            			</div>				
            		</div>
            		</div>
            	</section>

CSS: 

    .icon {
    	text-align: center;
    	height: 183px;
    	width: 51%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	z-index: 99;
    	font-size: 28px;
    	border-radius: 15px;
    	transition: 0.5s;
    	position: absolute;
    }
    #contain {
    	display: flex;
    	padding-top: 36px;
    	height: 99%;
    	width: 72%;
    	align-items: center;
    	justify-content: center;
    }
    .contenedorICON {
    	width: 100%;
    	position: relative;
    	z-index: 1;
    	height: 35%;
    	left: 82px;
    	margin: auto;
    	padding: 0;
    }
    .contenedorp {
    	position: relative;
    	width: 91%;
    	top: 4px;
    	bottom: 30px;
    	left: -72px;
    	margin: 0;
    	display: flex;
    }
    .parrafo {
    	width: 55%;
    	background: linear-gradient(rgb(208, 130, 30) , rgb(208, 66, 10));
    	padding: 27px 25px;
    	text-align: center;
    	transition: 0.5s;
    	font-size: 13px;
    	top: 16px;
    	margin: auto;
    	height: 32%;
    }
    .arrow {
    	color: #fff;
    	font-size: 29px;
    	cursor: pointer;
    	transition: 0.5s;
    	transform: translateX(-55%);
    	width: 67px;
    	text-align: center;
    	z-index: 585;
    	bottom: -3px;
    	left: 4px;
    	position: absolute;
    	bottom: 44px;
    	left: 100px;
    	right: 0;
    }

Alguno usuario de este foro, podria orientarme a como hacerlo? Igualmente acepto sugerencias del código por que no se si mi idea sea la mas correcta para hacerlo.

Gracias!

**Update:** Pude acomodar los divs, gracias a la sugerencia del usuario pero ahora tengo un pequeño problema con el posicionamiento de los items con z-index

**Mi nueva estructura HTML (resumida):** La clase grid-container es una clase que envuelve a todo el contenido que tengo dentro de las siguientes clases, que son los cuatro recuadros con sus respectivos contenidos posicionados *detras* de los principales.
    
    <div  class="grid-container"> <!--Contenedor envolvente-->
    
    			  <div class="grid-item"> <!--Contenedor principal-->
    <i class="fas fa-ruler-horizontal"></i>
    <div class="arrow1"> <!--Contenedor para icono, aca establezco un color para cada uno-->
      	<i class="fas fa-angle-down"></i>
      </div>
    
        <div class="contain-child"> <--!Contenedor para los parrafos.-->
    
            <div class="grid-item-child">2</div> <!--Hijos-->
    
            </div>
       
               </div>
               </div>

[![Ahora][4]][4]


Ahora cuando hago la animación (consta de desplazar el div lentamente). con mi funcion jquery, el div con la clase (contain-child) se superpone al div principal y lo que quiere es que se ponga detras del contenedor naranja.

[![introducir la descripción de la imagen aquí][5]][5]


Si le doy a la flecha para ocultar el parrafo, este si lo hace


En este punto el div se empiza a subir, ocultandose detras del recuadro naranja.


[![imagen][6]][6]


CSS: 

    .grid-container {
    	display: grid;
    	grid-template-columns: repeat(2, 170px);
    	padding: 30px;
    	grid-gap: 73px 157px;
    	position: absolute;
    	z-index: 0;
    }
    .grid-item {
    	border: 1px solid rgba(0, 0, 0, 0.8);
    	padding: 40px;
    	font-size: 30px;
    	text-align: center;
    	width: 218px;
    	position: relative;
    	background: linear-gradient(rgb(208, 130, 30) , rgb(208, 66, 10));
    	border-radius: 12px;
    Z-index: 99;
    }
    .grid-item-child {
    	width: 217px;
    	height: 100%;
    	background: linear-gradient(rgba(1596, 223, 167, 0.88) , rgba(149, 45, 40, 0.66));
    	border-radius: 11px;
    }
    .contain-child {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	z-index: -1;
    	top: 0;
    	left: 0;
    		transition: 0.5s;
    }


  [1]: https://i.sstatic.net/H1YqI.jpg
  [2]: https://i.sstatic.net/yqrnc.jpg
  [3]: https://i.sstatic.net/JLwGX.jpg
  [4]: https://i.sstatic.net/U28ro.jpg
  [5]: https://i.sstatic.net/iqdtZ.jpg
  [6]: https://i.sstatic.net/nM77G.jpg