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>