How to display image side by side in html - html

Question

For the below code when previewing I'm able to see images only verticallysee attached but want to show horizontally too(depending on the quantity). below three images are considered as one image and that one completes prints/preview next one horizontally
Can someone help me on this?
htp.p('<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 10px;
box-sizing: border-box;
}
</style>
');
FOR x in 1 .. 10
loop
htp.p(' <div class="column">
<div class="row">
<table>
<td>
<tr>
<td>
<img style="text-align: center;" alt="TRENDEST_LOGO"
src="https://lh3.googleusercontent.com/Ifrqww75cpmhI3mYsk1C28vYmlwwOi_VvuTyrH0xBEKPqed56lwrJINLZJNhFJ1zLSPFDg=s170"
width="200" height="50" ></td>
</tr>
<tr>
<td>
<img style="text-align: center;" alt="TRENDEST_BARCODE"
src="https://barcode.tec-it.com/barcode.ashx?data='||htf.escape_sc(bcode) ||'&code=Code128&translate-esc=true&unit=Fit&hidehrt=True&modulewidth=1"
width="200" height="80"></td>
</tr>
<tr>
<td>
<a title="ITEMS">
SHIRT ₹230
</a></td>
</tr>
</td>
</table>
</div>
</div> ');
end loop;

Answer 1

Heres your sample you can play with. hope this will help and let me know. I use flex then put a gap in it and wrap it.
.wrapper {
display: flex;
grid-gap:10px;
flex-wrap: wrap;
}
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrUH3Siiaj4-KM-a4ZhfESeNb9ZmocLBJuXVgVZtEfMQLZYt6jxbEuvloqE-aNvy9OCU&usqp=CAU" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrUH3Siiaj4-KM-a4ZhfESeNb9ZmocLBJuXVgVZtEfMQLZYt6jxbEuvloqE-aNvy9OCU&usqp=CAU" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrUH3Siiaj4-KM-a4ZhfESeNb9ZmocLBJuXVgVZtEfMQLZYt6jxbEuvloqE-aNvy9OCU&usqp=CAU" >
</div>

Answer 2

Create a div container and then the elements inside should have display: inline-block;