My page generates item cards when it receives value from API. This is the code which generates card.
$('body > #cards_daily').append('<div class="card"> ' item.items[0].name ' <br> ' item.finalPrice '<img src="https://fortnite-api.com/images/vbuck.png" height="28px">' ' <br> ' '<img id="image" src="' item.items[0].images.icon '"></img>' '</div>');
Here is my CSS:
.card {
display: flex;
background-color: rgb(148, 148, 150);
width: 250px;
height: 350px;
border-radius: 15px;
padding: 0px 10px;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: white;
font-family: 'Poppins', Arial;
font-size: 20px;
margin: 15px 10px;
text-align: center;
}
I'd like to have that image right after item.finalPrice. Right now it forces it to next line since card has flex-direction: column; applied to it. Is there a way to force that small icon right after price? You can see website here: