Flexbox column, force elements on same line exceptionally

November 23, 2021

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: https://davidlegartt.github.io/FortniteTracker/

>Solution :

Here is the HTML to put that small icon just right after the price.

<div class="row"><span>1200 <img src="https://fortnite-api.com/images/vbuck.png" height="20px"></span></div>

<div class="card"> ' + item.items[0].name + ' <br> <div class="row"><span>' + item.finalPrice + '<img src="https://fortnite-api.com/images/vbuck.png" height="28px">' + '</span></div> <br> ' + '<img id="image" src="' + item.items[0].images.icon + '"></img>' + '</div>'

See the screenshot.