estoy intentando crear una alerta con css y html como se muestra en la imagen:notificacion ya tengo la imagen encima del rectangulo y que el rectangulo comience justo a mitad de la imagen, sin embargo no logro que mi alerta quede igual que la imagen que subi porque el icono no queda alineado al texto, ¿Alguien podria apoyarme?
Mi código en html es el siguiente:
<div class="notificiacion">
<p class="rectangulo">
Aqui va el texto de mi alerta
</p>
</div>
Mi código en css es:
.rectangulo {
background-color: #fff6d9;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
font-size: 14px;
font-family: Arial;
color: #4c4c4c;
margin-left: 22px;
}
.notificiacion > img {
position: absolute;
width: 33px;
float: left;
vertical-align: middle;
}
Con este código logro el siguiente resultado: resultado_codigo