Jak obrócić tekst o 90 stopni i usunąć oryginalny margines [duplikat]

Question

więc mam ten problem, w którym obracam tekst o 90 stopni, ale marginesy są nadal takie same jak w oryginale (gdzie nie obróciłem tekstu)

Marginesy po obróceniu obrazu pozostają takie same. (Chcę, aby marginesy były zgodne z nową orientacją, w której obróciłem tekst)

(Nakładam czerwony kontur, żeby było lepiej widoczne.)

Ponadto, jeśli to możliwe, czy mogę zrobić czerwony kontur tak, aby wypełnił biel po lewej stronie? (Próbowałem użyć dopełnienia, ale nie działa tak, jak chcę)

Oto kod

<script src="https://kit.fontawesome.com/2c7037d9e8.js" crossorigin="anonymous"></script>
<div class='color-pick'>
    <div class='color-pick-text'>
        Colors <i class="fas fa-caret-down"></i>
    </div>
    <div class='color-pick-box'>
        <div class='color-opt color-red'></div>
        <div class="color-opt color-orange"></div>
        <div class="color-opt color-yellow"></div>
        <div class="color-opt color-green"></div>
        <div class="color-opt color-blue"></div>
        <div class="color-opt color-indigo"></div>
        <div class="color-opt color-purple"></div>
        <div class="color-opt color-lime"></div>
        <div class="color-opt color-pink"></div>
        <div class="color-opt color-silver"></div>
        <div class="color-opt color-custom"></div>
    </div>
</div>

i css:

.color-pick-box{
    background-color:#4c4c47;  
    display:flex;
    width:150px;
    flex-wrap: wrap;
}
.color-pick{
    border:1px solid blue;
    display:inline-flex;
    align-items: center;
    overflow:hidden;
}

.color-pick-text{
    text-align:center;
    border:1px solid red;
    transform:rotate(90deg);
 }

.color-opt{
    margin:5px;
    height:20px;
    width:20px;
    border-radius:50%;
}

.color-pick .fas{
    display:inline;
}

.color-red{
    background:red;
}
.color-orange{
    background:orange;
}
.color-yellow{
    background:yellow;
}
.color-green{
    background:green;
}
.color-blue{
    background:blue;
}
.color-indigo{
    background:indigo;
}
.color-purple{
    background:purple;
}
.color-lime{
    background:lime;
}
.color-pink{
    background:pink;
}
.color-silver{
    background:silver;
}
.color-custom{
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Dziękuję Ci! Przepraszam za mój zły angielski

Answer 1

Próbowałem w ten sposób. I to zadziałało.

.color-pick-text{
    text-align:center;
    border:1px solid red;
    writing-mode: vertical-lr;
}