Como coloco essas duas imagens uma ao lado da outra

<div id="margem">

   <div id="texto">

<p align="left"><strong>Mapas de Precipitações de Alagoas por Ano 2010-2017</strong></p>
                    <p align="left"> </p>
                    <hr />
                    
                    
                    <p align="left"><img src="mapas/precipitacao/AL/mapa10.jpg" width="225" height="400" /></p>
                    <p align="left"><a href="mapas/precipitacao/AL/2000-2017_ano_AL_v3.rar"> Download do Mapa do ano de 2010 </a></p>
                    
                    <p align="right"><img src="mapas/precipitacao/AL/mapa11.jpg" width="225" height="400" /></p>
                    <p align="right"><a href="mapas/precipitacao/AL/2000-2017_ano_AL_v3.rar"> Download do Mapa do ano de 2011  </a></p>
                    

                    <hr />

	 

	CSS

#margem{
padding-right:40px;
padding-left:40px;
padding-top:25px;
padding-bottom:25px;

}

#texto{
text-align:justify;
}

#texto a:link{

color:black;
text-decoration:underline;
}

#texto a:active{

color:black;
text-decoration:underline;
}

#texto a:visited{

color:black;
text-decoration:underline;
}

#texto a:hover{

color:#007dbe;
text-decoration:underline;
}

	![imagem](https://forum.imasters.com.br/monthly_2018_05/print.jpg.8506e3d9f63c0ea15a3106e0fb91876c.jpg)