Treat image and link as one element - html

Question

I'm making a responsive website. At the bottom I have a phone icon, a phone number, a mail icon and a mail address – all in one line.
<img src="https://cdn.pixabay.com/photo/2013/07/13/10/30/icon-157358_960_720.png" height="150px" width="111px">
123456
<img src="https://cdn.pixabay.com/photo/2016/06/13/17/30/mail-1454734_960_720.png" height="150px" width="150px">
asdf#gmail.com
In full window, it looks like this:
[phone img][phone number] [mail img][mail address]
When I resize the window they end up like this:
[phone img][phone number][mail img]
[mail address]
I want the icons and texts to stick together, like this:
[phone img][phone number]
[mail img][mail address]
I tried encasing them with div and span, but none worked. I also googled "html two elements stick together" without result. It feels really basic and I feel quite stupid, but I can't figure this out.

Answer 1

How about this:
<a href="tel:123456">
<img src="phone.jpg">123456
</a>
<a href="mailto:asdf#gmail.com">
<img src="mail.jpg">asdf#gmail.com</a>
use css to add paddings and responsive behaviours

Answer 2

What you could do is make both elements part of an unordered list and display that as two separate blocks on mobile. When the viewport grows (#media screen and (min-width: 600px)), the list elements (<li>) will display next to each other, thanks to display: inline-block;.
ul {
list-style: none;
}
#media screen and (min-width: 600px) {
li {
display: inline-block;
padding: 0 10px;
}
<ul>
<li><img src="phone.jpg">
123456</li>
<li><img src="mail.jpg">
asdf#gmail.com</li>
</ul>