How to display image side by side in html

Issue

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&nbsp;&nbsp;&nbsp;&nbsp;&#8377;230                          
  </a></td>
</tr>

</td>
</table>
</div>
</div> ');

end loop;

Solution

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>

Answered By - Crystal