I want to get an small png image and some text side by side in an icon how to achieve that currently it's vertically there? This is the order I currently have want to get the two along side instead of this the division is itself different because these are in a different subclass inside this messagecontent class.
Use CSS flexbox. Sample code :
.image-wrapper{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
background:#eee;
padding:1rem 2rem;
border-radius:1rem;
}
.image-wrapper img{
height:2rem;
margin-right:1rem;
}
.image-wrapper p{
font-size:1.8rem;
}<div class="image-wrapper">
<img src = "https://www.freepnglogos.com/uploads/google-logo-png/google-logo-icon-png-transparent-background-osteopathy-16.png" alt="logo"/>
<p>Some random text</p>
</div>Refer this to learn more about CSS flexbox link