Align to bottom right

Question

I am trying to align the "tickets" to the bottom right of the div element.

current view of the element

I have tried many methods but none of them are working for me, could someone help?

here is my current code,

.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;
}

.event .mainimg {
  grid-area: 0.25;
  width: 125px;
  height: 125px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.event .date {
  grid-area: 0.0833333333;
  width: 100px;
  margin: 0;
  padding: 0;
}

.event .details {
  grid-area: 0.0333333333;
}

.event .details p {
  padding-left: 15px;
}

.event .funnyimage {
  grid-area: 0.0208333333;
  width: 125px;
  height: 125px;
}

.event .ticket {
  grid-area: 0.0166666667;
  color: #2f3336;
}

.event .ticket p {
  background: #ff9b00;
  border-radius: 50%;
  padding: 8px 16px;
  text-align: right;
  position: relative;
  right: 0;
  bottom: 0;
}

<div class="event">
  <img src="images/sample image.svg" class="mainimg">
  <div class="date">
    <p style="margin-top: 20px">DAY</p>
    <p style="font-size: 2em;">XX</p>
    <p>MON</p>
  </div>
  <div class="details">
    <p style="padding-top:15px; font-size: 1.1em">EVENT NAME</p>
    <p>People performing</p>
    <p width="50%">Disc</p>
  </div>
  <div class="funnyimage">
    <img src="images/sample image.svg" style="clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);" width="200px" height="125px;">
  </div>
  <div class="ticket">
    <p title="SOLD OUT">Get Tickets</p>
  </div>
</div>

I have tried using relative positioning, but it went to the top right and only changed the text alignment.

Here is my scss

.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;
    }
  }
}

Answer 1

.event .ticket {
  position: relative;
}

.event .ticket p {
  position: absolute;
}