Two columns with text vertically centered - html

Question

I need two columns:
a button on the left
a list on the right
And they both need to be vertically centered in the middle of the wrapper div. So far I got this:
https://jsfiddle.net/s1ky1hqr/1/
I used this code to vertically center the inline-blocks inside the wrapper:
.wrapper {
/* let it fill the whole container */
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
}
.wrapper:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.column {
display: inline-block;
width: 48%;
}
<footer>
<div class="wrapper">
<div class="column">
<a class="cta" href="#">
<span class="text">
Button
</span>
<span class="arrow">
>
</span>
</a>
</div>
<div class="column">
<ul>
<li>Link 1</li><li>
Link 2</li><li>
Link 3</li>
</ul>
</div>
</div>
</footer>
The only problem is the ul list is not absolutely on the right, because the column divs aren't both 50% wide.
If I give both column divs a width of 50% the two divs won't fit next to each other. And I cannot "float" the column divs, cause in that case the text isn't vertically centered anymore.
Can anyone help me out?

Answer 1

You can actually use columns of 50% width if you set the font-size to 0 inside your wrapper and reset it for your columns, like this:
html { font-size: 12px; }
.wrapper {
/* let it fill the whole container */
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
font-size: 0;
}
.wrapper:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.column {
display: inline-block;
width: 50%;
font-size: 1rem;
}
<footer>
<div class="wrapper">
<div class="column">
<a class="cta" href="#">
<span class="text">
Button
</span>
<span class="arrow">
>
</span>
</a>
</div>
<div class="column">
<ul>
<li>Link 1</li><li>
Link 2</li><li>
Link 3</li>
</ul>
</div>
</div>
</footer>

Answer 2

You should add vertical-align:middle to .column instead .wrapper:before

Answer 3

You can achieve this by changing the li style to display: block; instead of display: inline-block, and getting rid of float: right; on the ul element.
Here's your example, updated.