me gustaría saber si alguien se le ocurre como puedo alinear tres iconos o fonts, pero deben estar en horizontal con un espacios entre ellos y poderse adaptar a los distintos tipos de dispositivos móviles y otros, lo comento, puesto que no he podido lograrlo y necesito ayuda. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .info { width: 100%; background: #fff; } .info i { font-size: 20px; color: #1977cc; float: left; width: 44px; height: 44px; background: #d6e9fa; display: flex; justify-content: center; align-items: center; border-radius: 50px; transition: all 0.3s ease-in-out; } .info h4 { padding: 0 0 0 60px; font-size: 22px; font-weight: 600; margin-bottom: 5px; color: #2c4964; } .info p { padding: 0 0 0 60px; margin-bottom: 0; font-size: 14px; color: #4b7dab; } <!-- language: lang-html --> <div class="col-lg-4"> <div class="info"> <div class="address"> <i class="bi bi-geo-alt"></i> <h4>Location:</h4> <p>KIST Hospital Road, 44700</p> </div> <div class="email"> <i class="bi bi-envelope"></i> <h4>Email:</h4> <p>[email protected]</p> </div> <div class="phone"> <i class="bi bi-phone"></i> <h4>Call:</h4> <p>+1 55234 5112 33s</p> </div> </div> </div> <!-- end snippet --> Esto me podría ayudar a entender de mejor manera como alinear los elementos, ya que están tres iconos metidos en un contenedor y la idea es que sean lo más adaptativos y responsivos posibles, de tal manera que el contenido se puede apreciar de buena manera desde un ordenador hasta un dispositivo móvil.