I want everything on a card to align on a column, except for the image attached, how do I separate the elements correctly?

I'm trying to build a horizontal card, but no matter what I try I can't align the name, price and button on a column without including the image in it.

This is what I want it to look like:

However, it ends up looking like one of these two:

outcome one, using "flex-direction: column"

outcome two, not using flex

The cards are loaded via js from an object var containing multiple things like price, images, and code value:

function mostrarEvento(evento) {
    return `<div class="cartaEvento">
            <div class="imgEvento"><img src='${evento.imagen}'</img></div>
            <div class="evento"><p>${evento.tipo}</p></div>
            <div class="precio"><p>$ ${evento.precio}</p></div>
            <div class="comprar"><button id="${evento.codigo}">Comprar</button></div>
            </div>`;
}

Which are then styled with css:

.cartaEvento {
    min-width: 40em;
    margin: 1em;
    padding: 1em;
    display:flex;
    align-items: center;
    flex-direction: column;
    gap: 10px; 
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

I have tried multiple things, changing the display type, searching on any forum and trying to learn more flexbox, but nothing works, I even tried to give the image it's own properties and it doesn't work either:

.imgEvento { flex-direction:row; }

.cartaEvento {
  min-width: 40em;
  margin: 1em;
  padding: 1em;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

<div class="cartaEvento">
  <div class="imgEvento"><img src='${evento.imagen}'</img></div>
  <div class="evento">
    <p>${evento.tipo}</p>
  </div>
  <div class="precio">
    <p>$ ${evento.precio}</p>
  </div>
  <div class="comprar"><button id="${evento.codigo}">Comprar</button></div>
</div>

cartaEvento needs to only have two children divs. Then, cartaEvento should flex-direction:row;

The first of the two children will be the image div, which is imgEvento. This you already have.

The second of the two children you need to create. This one, you will put the rest of the divs inside of. So that's evento, precio, and comprar will go into this new div.

So now you will have one root div which controls the layout of the two children divs.