Div with vertical and horizontal text inside
You almost had it. Added flex-direction: column and switch your align content and justify content on your container div.
.container {
width: 70px;
height: 400px;
background-color: lightgray;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: center;
justify-content: space-between;
}
.circle {
}
.bottom-container {
display: flex;
flex-direction: column;
}
.artist {
border: 1px solid red;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.number {
border: 1px solid lime;
}<div class="container">
<div class="circle">🔴</div>
<div class="bottom-container">
<div class="artist">Artist - Never forget my love</div>
<div class="number">03</div>
</div>
</div>The circle div should take full space. Adding width and text-align to the circle class did the job:
.circle {
width: 100%;
text-align: center;
}