Rotate text and align along the edge

<div class="text-wrap">

    <div class="right box">Right</div>
    
    <div class="left box">Left</div>
    
    <div class="top box">Top</div>
    
    <div class="bottom box">Bottom</div>
        
</div>

.text-wrap {
    width:100;
    height:auto;
    aspect-ratio: 1/1;
    position:relative;
    background-color: rgb(199, 199, 255);
    background:linear-gradient(blue,blue) center/100% 1px no-repeat,linear-gradient(blue,blue) center/1px 100% no-repeat, rgb(199, 233, 255);
}

.top {
    right:50%;
    top:0;
    transform: translateX(50%);
}

.left {
    transform-origin: top left;
    left:0;
    top:50%;
    transform: rotate(-90deg) translateX(-50%);
}

.right {
    transform-origin:top right;
    right:0;
    top:50%;
    transform: rotate(90deg) translateX(50%);
}

.bottom {
    left:50%;
    bottom:0;
    transform: translateX(-50%);
}

.box {
    position: absolute;
    background-color: blue;
    color: white;

    padding:10px;
    font-size:25px;
}