How to position texts in the four side of a HTML Page with responsive letter spacing hover animation

I'm trying to place 4 texts in the four sides of the webpage. all these texts will have line spacing to separate all the characters from one another. Once, hovered line spacing will be reduced to normal making them appear in the middle.

--------------------------
|         top text       |
|                        |
| v                     v|
| e                     e|
| r                     r|
| t    other  content   t|
| i                     i|   
| c                     c|
| a                     a|
| l                     l|
|       bottom text      |
--------------------------

So far, I have written this:

.spaced-text{
    color:white ;
    text-shadow: 2px 2px 4px #000000;
    letter-spacing: 100px;
    width: 100%;
  height: 42px;
  text-transform: uppercase;
  text-decoration: none;
    text-align: center;

}    

.spaced-text:hover{
    text-decoration: none;
    color: #CE640E;
    animation: spaced-in   1s  ease-out forwards;
}

@keyframes spaced-in{
    0%{
    letter-spacing: 100px;
    opacity: 0.1;
  }
  20%{
    letter-spacing: 80px;
    opacity: 0.2;
  }
    40%{
    letter-spacing: 60px;
    opacity: 0.4;
  }

    60%{
    letter-spacing: 40px;
    opacity: 0.6;
  }

    80%{
    letter-spacing: 20px;
    opacity: 0.8;
  }
  100%{
    letter-spacing: 1px;
    opacity: 1;
  }
}

.vertical-text-right{
    text-decoration: none;
    transform: rotate(-90deg);
    float: right;
    position: absolute;
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 50%;
    text-align: center;
    

}

.vertical-text-left{
    transform: rotate(90deg);
    float: left;
    position: absolute;
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 50%;
    text-align: center;
    

}
a{
   text-decoration: none;
}

<html>
<body>
<div style="float:left"><h1 class="vertical-text-right spaced-text"> <a href="#">Right Text</a></h1></div> 
<div style="float:left"><h1 class="vertical-text-left spaced-text"> <a href="#">Left Text</a></h1></div> 
<center><div class="text-center"><h1 class="spaced-text text-center"> <a href="#"> Top Text</a></h1></div> 
</center>
<div style="width:100%; height: 100px;">
<center><i>Some other content</i></center></div>
<center><div class="text-center"><h1 class="spaced-text text-center"> <a href="#">Bottom Text</a></h1></div> 
</center>


</body>
</html>

Notice that, the left and right vertical texts are not aligning properly! they should be on the left and right side of the div.

P.S: the text spacing is not responsive which is another issue.

Solution

I did fix that code after a sound sleep, but didn't get time to post it that day. Here is how I fixed it:

.spaced-text{
        color: white ;
        letter-spacing: 2vw;
        width: 80%;
        height: 43px;
        text-transform: uppercase;
        text-decoration: none;
        text-shadow: 2px 2px 4px #000000;
        z-index: 9999;
    }    

   .vertical-text-right:hover, .spaced-text:hover, .vertical-text-left:hover{
        text-decoration: none;
        color: #CE640E;
        animation: spaced-in   0.5s  ease-out forwards;
    }

    @keyframes spaced-in{
        0%{
            letter-spacing: 2vw;
            opacity: 0.1;
        }
        20%{
            letter-spacing: 1.5vw;
            opacity: 0.2;
        }
        40%{
            letter-spacing: 1vw;
            opacity: 0.4;
        }

        60%{
            letter-spacing: .8vw;
            opacity: 0.6;
        }

        80%{
            letter-spacing: 0.4vw;
            opacity: 0.8;
        }
        100%{
            letter-spacing: 1px;
            opacity: 1;
        }
    }

    .vertical-text-right{
        font-size: 2em;
        text-decoration: none;
        transform: rotate(-90deg);
        position: absolute;
        left: 50%;
        top: 30%;
        padding-right: 10%;
        padding-top: 10%;
        padding-bottom: 20%;
        text-align: center;
        z-index:999;
    }

    .vertical-text-left{
        font-size: 2em;
        position: absolute;
        right:50%;
        top:30%;
        transform: rotate(90deg);
        text-align: center;
        padding-left: 10%;
        padding-top: 10%;
        padding-bottom:20%;
        z-index: 999;
    }

    a{
        text-decoration: none;
        width: 500px;
    }

.text-center {text-align: center;}

<div>
<h1 class='text-center'><a class="spaced-text text-center" href="#">TOP TEXT</a></h1>
</div>
<div class='text-center' style="padding:25%;"> Some other contents</div>
<a class="spaced-text vertical-text-left" href="#">LEFT TEXT</a>

<a class="spaced-text vertical-text-right" href="#">RIGHT TEXT</a>
<div class='text-center'>
<h1><a class="spaced-text text-center" href="#">BOTTOM TEXT</a></h1>
</div>