Vertically centered text keeps going under icon

Question

I am trying to make a alert for my project which looks good but when I make it a mobile page the text goes under the icon. I want it to stay aligned beside the icon.

HTML:

<div class="rds-alert">
    <img class="rds-alert-icon"/>
    <div class="rds-alert-message">
        <span class="rds-alert-so">Congratulation</span> Your submission has been approved.
    </div>    
</div>

CSS:

.rds-alert-so{
    font-size:30px;
}
.rds-alert-icon{
    width:70px;
    height:70px;
    vertical-align:middle;
    margin-right:12px;
}
.rds-alert-message{
    display:inline;
}

Jsfiddle: http://jsfiddle.net/0f2rpvc8/

Answer 1

Here's one way:

 .rds-alert-so { font-size:30px; } .rds-alert-icon { width:70px; height:70px; margin-right:12px; display:table-cell; } .rds-alert-message { display:table-cell; vertical-align:middle; } .rds-alert { display:table-row; } 

 <div class="rds-alert"> <img class="rds-alert-icon" /> <div class="rds-alert-message"> <span class="rds-alert-so">Congratulation</span> Your submission has been approved.</div> </div> 

Answer 2

or

.rds-alert-icon {
float: left;
}

http://jsfiddle.net/2Lfkrxup/