Build responsive button with image, text and a link using css - html

Question

I tried several things but I am out of luck. I need to build a button containing an image and text over a button background image. Also, clicking anywhere inside the button should redirect to a page, for example, google.com. This is how the button should look like
The challenge I am having is that when the button text changes or when the screen size changes, the alignment of the image and the text gets messed up. I want to wrap the button text if it is too large. How do I wrap the button text and still align everything correctly? Also, I want the button width to be the same as I have to build multiple buttons of the same size with varied texts and images. Thank you so much. A quicker solution will be appreciated as I am anxious to see what I am doing wrong. Here is the code I have so far: JSFiddle
<a href="https://www.google.com" style="color: white !important; background-color: #7FFF00;padding: 25px;width: 50px;">
<span style="margin-bottom: 5%;">
<img src="http://placehold.it/30x30" height:100%; style="display: inline-block;" width="30" height="30" />
<span style="display: inline-block;">
<b><font size ="2" color="BLACK" face="Arial">CLICK ON THE IMAGE TO VIEW MORE DETAILS ABOUT THE ITEM </font> </b>
</span>
</span>
</a>

Answer 1

img{
width:30px;
height:30px;
}
a{
text-decoration:none;
color:black;}
#img{
float:left;
}
#img,#text{
display:inline;
}
#main{
margin-top:20px;
width:250px;
border:2px solid black;
border-radius:10px;
background:yellowgreen;
}
#container{
margin:15px;
}
div.clickable {
position:relative;
}
div.clickable #mainlink {
position:absolute;
width:100%;
height:100%;
}
<div class="clickable">
<a href="www.google.com" id="mainlink">
<div id="main">
<div id="container">
<div id="img">
<img src="http://oer.nios.ac.in/wiki/images/thumb/4/47/Thumpsup.png/200px-Thumpsup.png"/>
</div>
<div id="text">
<span>Click on the image to view more about the item</span>
</div>
</div>
</div>
</a>
</div>