CSS two elements 50% each aligned vertically and horizontally - css

Question

Fiddle
I have problem in my button. I want my button divided into two, 50% each.
For example in my fiddle, I have a blue button having text Use and icon1
Use and icon1 should be 50% each and aligned vertically and horizontally relative to the blue button which I can't do that for some reasons.
Same goes on red button as well.
Solution: Fiddle
<div class='gc_footer_use_nix'>
<div class='gc_footer_nix'>
<div class="gc_footer_button_wrapper">
<div class='gc_footer_nix_txt'>Nix</div>
<div class='gc_footer_nix_icon'>icon2</div>
</div>
</div>
<div class='gc_footer_use'>
<div class="gc_footer_button_wrapper">
<div class='gc_footer_use_txt'>Use</div>
<div class='gc_footer_use_icon'>icon1</div>
</div>
</div>
</div>
CSS:
.gc_footter_use_nix{
text-align: right;
display: table-cell;
vertical-align: middle;
width: 50%;
}
.gc_footer_use{
display: table-cell;
vertical-align: middle;
background-color: #3F6EB6;
padding:5px 30px 5px 30px;
border-radius: 3px;
float: right;
margin-right: 10px;
}
.gc_footer_use_txt{
float: left;
display: table-cell;
vertical-align: middle;
color: white;
font-size: 1.5em;
width: 50%;
margin: auto;
}
.gc_footer_use_icon{
text-align: right;
display: table-cell;
vertical-align: middle;
width: 50%;
margin: auto;
}
.gc_footer_nix{
display: table-cell;
vertical-align: middle;
background-color: #D61920;
padding:5px 30px 5px 30px;
border-radius: 3px;
color: white;
font-size: 1.5em;
float: right;
border: 0px solid green;
}
.gc_footer_nix_txt{
float: left;
display: table-cell;
vertical-align: middle;
position: relative;
border: 0px solid blue;
}
.gc_footer_nix_icon{
float: right;
display: table-cell;
vertical-align: middle;
position: relative;
border: 0px solid yellow;
}
.gc_footer_button_wrapper{
display: table;
width: 100%;
position: relative;
}

Answer 1

Try this fiddle this fiddle.
I changed these rules:
.gc_footer_use {
display: table-cell;
vertical-align: middle;
background-color: #3F6EB6;
border-radius: 3px;
float: right;
margin-right: 10px;
}
.gc_footer_button_wrapper {
display: table;
box-sizing: border-box;
width: 100%;
}
.gc_footer_use_txt {
display: table-cell;
vertical-align: middle;
color: white;
font-size: 1.5em;
padding: 5px 30px 5px 5px;
}
.gc_footer_use_icon{
text-align: right;
display: table-cell;
vertical-align: middle;
padding: 5px 5px 3px 5px;
}
Explanation
I made the gc_footer_button_wrapper class to use the table display and be as wide as its parent container box-sizing: border-box; width: 100%;. Then I made its children to be table-cells that are vertically middle aligned.
I also removed float rules from gc_footer_use_txt and gc_footer_use_icon classes as with my technique it was unnecessary.
Finally, I moved the padding rules to the gc_footer_button_wrapper. These paddings can be customized they you see fit. One might even remove them.
You can use the same technique for the other button.