Trying to display JSON data with images and text side by side but facing issues where the text wraps below the image instead. How can I fix this layout to show text next to the image? Flex-wrap property doesn't seem to work as expected.
function forOnline(img, gameName, description) {
var para = '<img id="mainImg" src=' + img + '>' + '<p id="textovo">' + gameName + ": " + description + '</p>';
$("#onlineImage").append(para);
.container {
display: flex;
border: 3px solid yellowgreen;
height: 50em;
width: 50em;
flex-direction: column;
flex-wrap: nowrap;
}
.mainCont {
background-color: rgb(177, 175, 175);
width: 30em;
height: 5em;
}
.onlineContainer {
width: 40em;
height: 5em;
border: 2px solid blue;
}