CSS - Unable to align image and text together inside div - html

Question

I'm trying to show message within a div with icon on the left.
Expected result is icon should always adjacent to text and together they need to be aligned at bottom-center of div.
I'm using :after pseudo element. Keeping position: absolute of icon didn't help since that needs manually adjusting the icon position relative to text.
Here is the CSS.
.parent{
font-weight: 500;
height: 65px;
text-align: center;
padding: 15px 0 10px;
margin: auto;
display: block;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
}
.parent > div {
float: none;
/* display: table-cell; */
vertical-align: middle;
position: absolute;
bottom: 0;
width: 100%;
}
.msg:after {
content: '';
background: url(data:image/...);
height: 16px;
width: 16px;
display: block;
position: absolute;
top: 0;
padding-right: 5px;
left: 108px;
}
And markup:
<div class="parent">
<div class="msg">text goes here</div>
</div>

Answer 1

Flexbox can do that:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.parent {
font-weight: 500;
margin: auto;
padding: 1em;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
border: 1px solid red;
}
.msg {
display: flex;
}
.msg p {
padding-left: 1em;
}
.msg:before {
content: "";
height: 16px;
flex: 0 0 16px;
background: red;
border-radius: 100%;
}
<div class="parent">
<div class="msg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae numquam unde, eum sequi expedita fugiat ipsa exercitationem nesciunt libero repellendus aperiam excepturi, dolorem repudiandae eveniet alias perspiciatis, vero veniam tempora natus magnam
itaque quos. Nemo sit nisi, veniam mollitia fugit eaque reiciendis ex doloribus rem et suscipit debitis commodi sapiente.</p>
</div>
</div>