I am trying to recreate a div structure that features a circle emoji at the top and two text elements at the bottom. However, my attempt is not producing the desired result.
Here is my current code:
.container {
width: 70px;
height: 400px;
background-color: lightgray;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
}
.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>However, I am facing issues with this layout. Can anyone help me identify the problem?