When my page receives data from an API, it dynamically generates item cards using this code snippet:
$('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>');
Below is the CSS I'm using for styling these cards:
.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;
}
Currently, the small icon image is appearing on a separate line after the item price due to the flex-direction set to column in the card. Is there a way to position the image next to the price instead of below it?
You can view the website here: