CSS Card expand to center of the screen

Question

I'm making a todo list-like application. I need to make a todo card that will expand on click and move to the center of the sreen without moving other cards in bento board.

Here's a brief example of card. So firstly I need to somehow make ther cartd smaller and hide everything in ticket__body. Then I need to move and expand it on click at card itself. I've already tried using position relative with transform: translate(); which didn't help me. The animation was laggy and the card was "jumping".

The actual code of card:

.ticket {
  background-color: rgb(25, 25, 25);
  max-width: 300px;
  border-radius: 25px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.ticket__header {
  font-size: 1.1rem;
  font-weight: 800;
}

.ticket__body {
}

.ticket__tag {
  font-weight: 600;
  padding: 5px;
  background-color: rgb(0, 110, 230);
  max-width: fit-content;
  border-radius: 1024px;
}

.ticket__text {
  font-weight: 300;
}

function Ticket() {
  return (
    <div className='ticket'>
      <div className="ticket__header">Lorem ipsum dolor sit.</div>
      <div className="ticket__body">
        <div className="ticket__tag">Emergent</div>
        <div className="ticket__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores enim assumenda incidunt esse repellat ipsa aliquid cum quam? Eveniet ullam suscipit ducimus eligendi blanditiis! Doloribus.</div>
      </div>
    </div>
  )
}

Answer 1

Use this code in css:

    .ticket { justify-content: center; }

Thanks