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]
  [1]: https://i.sstatic.net/H1YqI.jpg
  [2]: https://i.sstatic.net/yqrnc.jpg
[3]: https://i.sstatic.net/JLwGX.jpg


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!