position a div on the right of another div in ionic HTML - html

Question

i want to position a div with the id "first" to the right of another div with the id "second" how to do that ?
<ion-col>
<div id="second">
<ion-img src="./assets/images/from_to.svg" style="height:30%;width:10%;"></ion-img>
</div>
      <div id="first">
<ion-label>Domicile</ion-label>
<ion-label >120 Square de la Couronne,Paris</ion-label>
</div>
</ion-col>

Answer 1

First of all, I suggest you lessen the use of the basic html, for example, try using instead of .
Second, you practically never use id with html tags.
Now to answer your question, a little bit more code would help but here's one solution:
HTML:
<ion-col>
<ion-item class="second">
<ion-image class="img" src="/assets/images/from_to.svg" />
</ion-item>
<ion-item class="first">
<ion-label>Domicile</ion-label>
<ion-label>120 Square de la Couronne,Paris</ion-label>
</ion-item>
</ion-col>
CSS:
.first{
float: right;
}
.second{
float:left;
}
I assume that you already know that "HTML" goes to your x.page.html and the "CSS" goes to your x.page.scss of the same folder.

Answer 2

Looks like you want to create a list containing an image with an description on the right side on every element. If that's the case try ion-list which offers interacting with the list elements much easier, since you can use the included swiping, dragging within the list, and deleting items.
Example:
<ion-list>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
</ion-list>