Home > database >  Flexbox column, force elements on same line exceptionally
Flexbox column, force elements on same line exceptionally

Time:11-24

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: enter image description here

  • Related