I am currently trying to create some cards with some details about players. The name of the players is displayed vertically to the card, which I have positioned absolutely. The problem is that as the name gets longer, the name then spreads down instead of going flush from bottom to top. I've tried couple of solution but i can't get it work. Is this even possible? Or does the transform value here just cause problems?
What i'm trying to achieved is that:
.potw-section{
background-color: #111;
}
.container{
width: 100%;
max-width: 1260px;
margin: 0 auto;
padding: 0 1.875rem;
box-sizing: border-box;
}
.potw-grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 0px 90px;
}
.potw-card{
display: flex;
position: relative;
width: 100%;
align-items: center;
}
.potw-meta{
position: absolute;
left: 0;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
font-size: 1.563rem;
line-height: 29px;
text-transform: uppercase;
font-weight: 700;
width: 95px;
background: linear-gradient(90deg, rgba(17, 17, 17, 0.7) 62.11%, rgba(17, 17, 17, 0.5) 62.11%, rgba(0, 0, 0, 0) 122.11%);
}
.potw-meta-inner{
display: flex;
flex-direction: column;
padding: 1.25rem 0;
}
.potw-value{
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.563rem;
line-height: 29px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1.25rem;
}
.potw-value img{
max-height: 30px;
}
.potw-outline{
position: absolute;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
font-size: 2.188rem;
line-height: 39px;
text-transform: uppercase;
font-weight: 700;
left: -46%;
bottom: 27%;
letter-spacing: 2px;
transform: rotate(270deg);
}<div class="potw-section">
<div class="container">
<div class="potw-grid">
<div class="potw-card">
<p class="potw-outline">Malte Delow</p>
<div class="potw-meta">
<div class="potw-meta-inner">
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<img src="https://i.ibb.co/KWgnKvh/lakers.png" >
</div>
</div>
</div>
<img src="https://i.ibb.co/NFxXnZm/potw-player.png">
</div>
<div class="potw-card">
<p class="potw-outline">Malte Delow</p>
<div class="potw-meta">
<div class="potw-meta-inner">
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<img src="https://i.ibb.co/KWgnKvh/lakers.png" >
</div>
</div>
</div>
<img src="https://i.ibb.co/NFxXnZm/potw-player.png">
</div>
<div class="potw-card">
<p class="potw-outline">Longer Name Delow</p>
<div class="potw-meta">
<div class="potw-meta-inner">
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<img src="https://i.ibb.co/KWgnKvh/lakers.png" >
</div>
</div>
</div>
<img src="https://i.ibb.co/NFxXnZm/potw-player.png">
</div>
</div>
</div>
</div>