**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. 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. [![introducir la descripción de la imagen aquí][6]][6] [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/ktujF.jpg [6]: https://i.sstatic.net/nM77G.jpg 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; }