Align two elements of different height in the middle of a div - html

Question

I have two elements [a custom button and a paragraph line]in my fixed footer (always stays on page) that I've been trying to horizontally align in the center.
<div class="footer">
<div class="co_footer_content">
<button class="func_button" >
<span class="func_button_ico"></span>
</button>
<p class="footer_txt">Small one liner {{varContent}}</p>
</div>
</div>
Here's the CSS
.footer{
height: 87px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ffffff;
}
.func_button{
background: transparent;
border: 0;
height: 44px;
width: 44px;
margin: auto;
display:block;
position: absolute;
cursor: pointer;
left: 0;
margin-left: auto;
margin-right: auto;
}
.func_button_ico{
background:url(./assets/func_button.png) no-repeat top left;
display: inline-block;
margin: auto;
height: 44px;
width: 44px;
float: right;
}
.footer_txt{
text-align: center;
padding: 0;
margin:0;
}
As seen in the above html snippet, there is varConent which changes the width of my content to some extent. So everytime the content changes, the <p> recenters. The height is fixed however i.e. the content doesn't go to more than one line.
I want the custom button to stick with this variable width <p> so that they are in the same line but also to be able adjust the button's position independent of <p> What would be the right way to do this?

Answer 1

Here's the codepen: https://codepen.io/johnsackson/pen/ZobMLj
<div class="co_footer_content">
<button class="func_button">
<span class="func_button_ico"></span>
</button>
<p class="footer_txt">Small one liner {{varContent}}</p>
</div>
</div>
CSS:
.footer{
height: 87px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ffffff;
}
.co_footer_content {
display: table;
margin: 0 auto;
}
.func_button{
background: transparent;
border: 0;
height: 44px;
width: 44px;
margin: auto;
display:block;
cursor: pointer;
margin-left: auto;
margin-right: auto;
display:table-cell;
vertical-align: middle;
text-align: center;
margin-right: 20px;
}
.func_button_ico{
background:url(./assets/func_button.png) no-repeat top left;
display: inline-block;
margin: auto;
height: 44px;
width: 44px;
}
.footer_txt{
text-align: left;
padding: 0;
margin:0;
display:table-cell;
vertical-align: middle;
}