Trying to align elements inside of a div - css

Question

I'm looking at creating a list of jobs for a careers page side bar.
Each job should consist of the job title and an apply button.
Each listing is encased in a rounded grey box with some margin for spacing.
I've attempted to create it in this pen below, hopefully someone can take a look at my code and advise me on how to get the button floated to the right and the title and button to be centered within the box.
http://codepen.io/adamlcasey/pen/jIsFB
I'm fairly new to css and html, so I'm not at the point where I know what the best way to implement this is? In the pen above I've used two different options.
The first uses a div, h4 and elements
The second uses a div and unordered list.
NOTE:The final code needs to be placed inside of a template for my CMS (Hubspot). Hubspot have some rules about template design that I can't use. (So that their templates stay responsive) one of which is the element.
Here's my code:
<div class="box">
<h4>Business Development <br>
Manager</h4>
<a class="button" href="http://www.my-site.com/business-development- manager">Apply</a>
</div>
<div class="box">
<ul>
<li><h4>Customer Support <br>Agent</h4></li>
<li><a class="button" href="http://www.my-site.com/business-development-manager">Apply</a></li>
</ul>
</div>
CSS Code:
p, h4, a, li {
font-family: 'Open Sans',sans-serif!important;
}
.box {
background: #f2f2f2;
border-radius: 4px;
padding: 1em 1em;
margin: 2em 0!important;
text-align: left;
}
h4, li {
font-weight: 300;
color: #07355C;
display: inline-block;
vertical-align: middle;
}
.button {
font-size: 1em!important;
padding: 5px 20px!important;
text-decoration: none;
-webkit-box-shadow: #e28b00 0 1px 0;
-moz-box-shadow: #e28b00 0 1px 0;
box-shadow: #e28b00 0 1px 0;
background-color: #f6ae2b;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6ae2b),color- stop(70%,#f39d13));
background-image: -webkit-linear-gradient(#f6ae2b,#f39d13 70%);
background-image: -moz-linear-gradient(#f6ae2b,#f39d13 70%);
background-image: -o-linear-gradient(#f6ae2b,#f39d13 70%);
background-image: linear-grad;
padding-left: 0;
padding-right: 0;
text-align: center;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 10px 20px;
font-size: 18px;
border: none;
color: white;
display: inline-block;
vertical-align: middle;
float: right;
margin-right:1em;
}
.box ul {
margin: 0;
padding: 0;
list-style-type: none;
}

Answer 1

Here is another Idea. I do not provive code in my answer because it is too much. Mainly i just added some grid like wrappers
http://codepen.io/Nico_O/pen/ybjLE