Ciao a tutti, ho un problema nel posizionare gli elementi all'interno di un div.
Mi spiego meglio:

index.html

codice:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="all and (min-width: 940px)" href="style.css" type="text/css">
</head>
<body>
    <div class="topnav">
    
        <a href="mailto:Pdwfgjttdesign@gmail.com"><img src="images\email.ico" class="ico"></img></a>
        <p class="textnav">Pdwfgjttdesign@gmail.com</p>
        <a href="contatti.html"><img src="images\telefono.png" class="ico"></img></a>
        <p class="textnav">+90 738 139 49 37</p>
        
        <a href="#"><img src="images\fb.png" class="ico"></img></a>
        <a href="#"><img src="images\ig.png" class="ico"></img></a>
    </div>
    <div style="padding-left:16px">
      <h2>Top Navigation Example</h2>
      <p>Some content..</p>
    </div>

</body>
style.css
codice:
.ico { width: auto; height: 30px; ; }
.textnav {font: 20px Arial, serif; color: white; margin-left: 10%; margin-right: 10%; text-align: justify;}



.topnav {
    display: flex;
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  margin: auto;
  float: left;
  color: #FFFFFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

 a:link {
    font: 30px 'Avenir', Arial, serif;
    color: #000000;
    text-decoration: none;
}

a:visited {
    color: #FFBF00;
}

a.selected {
    /*text-shadow: 0px 0px 8px #000; */
    color: red;
}

a:hover {
    text-shadow: 0px 0px 8px #000;
}

body {    
    margin: 0;
    background-color: #FFFFFF;
}
Il risultato è che tutti gli elementi sono equidistanti tra loro, e non so come fare ad affiancare l'icona delle email all'indirizzo e-mail, e quella del telefono al numero di telefono. Come potrei risolvere il problema?

Grazie per la disponibilità