Custom footer blocks - is there a way to link two blocks so they respond together?

Hi, 

I am creating a custom footer and want it to look like this. 

I am designing on a 13inch screen at the moment and I haven't edited for other devices yet.

When I resize my browser the Instagram images and the custom button overlap and and responsive together. I am wondering if there is a way to link them together or basically stop this from happening? 

The code I have currently is 

//Footer

//Social Icon Tab

// @luxamatravel
#block-yui_3_17_2_1_1643212297299_4524

{
  position: relative;
  z-index:2;
  left:6.9em;
  top: 0.0em;
}

//Rotate

#block-yui_3_17_2_1_1643212297299_4524

{
  writing-mode: vertical-rl;
    transform: rotate(180deg);
}

  
//instagram images 
#block-yui_3_17_2_1_1643204551067_15575
{
  padding: 5px;
   margin-left:1px;
  margin-right:1em; 
  top:13px;
  bottom:1em;
  right:0em;
  left:3.1em;
  position:relative;
  z-index:1;

}

//Privacy
#block-yui_3_17_2_1_1643204551067_41001
{
  right:50%;
  left: 50%;
  padding-bottom:1px;
  padding-top:8px;
}

//Social Icons 
#block-yui_3_17_2_1_1643733898962_12402 {right:50%;
  left: 50%;
padding-bottom:0px}

//--On Page Icons
.sqs-use--icon {fill:#3F798E!important;}
.sqs-use--mask {fill:none!important;}
.sqs-svg-icon--wrapper {border-color:none!important}

//Favicon
#block-yui_3_17_2_1_1643204551067_25302 { width: 50%;
height: 50%;
  margin-left: 40px;
  padding-top: 10px;
  padding-bottom:10px;
}

//Brand and web design by 

div#block-998919da372c25060c30
    a {  
font-family: 'Mistrully';
font-size:25px;
 }

#block-998919da372c25060c30 {
  padding-top:10px;
    padding-bottom: 3px;}

///////////

//Hide/Show on Desktop vs. Mobile

/* Hide on Mobile */
@media only screen and (max-width: 640px) {
#block
  {display: none;}
}

// hide on desktop 

/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
#block-yui_3_17_2_1_1643215365514_5609
{display: none;}
}



 

Hi. What is your site url?