Выровнять по правому нижнему краю ⇐ CSS

[Anonymous]

Я пытаюсь выровнять «билеты» в правом нижнем углу элемента div. Текущее представление элемента.
Я пробовал много методов, но ни один из них не работает для меня, может ли кто-нибудь помочь?< /p>
вот мой текущий код

Код: Выделить всё

html:

[img]images/sample image.svg[/img]

DAY
XX
MON

EVENT NAME
People performing
Disc

[img]images/sample image.svg[/img]

Get Tickets



css:
.event {
display: grid;
grid-template-columns: 125px 5px 1fr 1fr 125px;
grid-template-rows: 1;
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 80%;
margin-left: 10%;
margin-right: 10px;
height: 125px;
border-radius: 10px;
background-color: #1378C6;
color: white;

.mainimg {
grid-area: 1 / 1 / 2 / 2;
width: 125px;
height: 125px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}

.date {
grid-area: 1 / 2 / 2 / 3;
width: 100px;
margin: 0;
padding: 0;
}

.details {
grid-area: 1 / 3 / 2 / 5;
p {
padding-left: 15px;
}
}

.funnyimage {
grid-area: 1 / 4 / 2 / 6;
width: 125px;
height: 125px;
}

.ticket {
grid-area: 1 / 5 / 2 / 6;
color: #2F3336;
p {
background: #FF9B00;
border-radius: 50%;
padding: 8px 16px;
text-align: right;
position: relative; right: 0; bottom: 0;
}
}
}

Я пробовал использовать относительное позиционирование, но оно переместилось в правый верхний угол и изменило только выравнивание текста.

Подробнее здесь: https://stackoverflow.com/questions/784 ... ttom-right