Sideways header - html

Question

I've been trying to solve a sideways header problem. I intend on creating a globally sideways header like so on a website: sideways header
However, my problem arises trying to separate the type (it's also breaking on 2 lines). I can't seem to make the vertical line contained or centered within the rectangle . When I resize my browser window it does not stay contained within the rectangle box. I would GREATLY appreciate any suggestions and advice!
What I have so far:
.box {
height: 1326px;
width: 112px;
background-color: transparent;
border: 1px solid #f9f0e4;
}
.bottom {
text-align: center;
color: #000000;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.top {
text-align: center;
color: #000000;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.vl {
border-left: 1px solid #f9f0e4;
height: 620px;
position: absolute;
left: 50%;
top: 0;
}
<div class="container">
<div class="box">
<p class="bottom">CREATIVE STUDIO</p>
<div class="vl">
<p class="top">FLORENCE — ITALY</p>
</div>
</div>
</div>

Answer 1

You can instead consider rotation on the whole box and use vh unit so the width is relative to height since it's getting rotated :
.box {
background-color: transparent;
width: 80vh;
border: 1px solid;
transform: rotate(-90deg) translate(-50%, 0);
transform-origin: center;
}
.box {
display: flex;
justify-content: space-between;
text-align: center;
color: #000000;
}
.bottom {
text-align: center;
color: #000000;
margin-left: 10px;
}
.top {
text-align: center;
color: #000000;
margin-right: 10px;
}
<div class="box">
<p class="bottom">CREATIVE STUDIO</p>
<p class="top">FLORENCE — ITALY</p>
</div>