<a href> coming before span in css - html

Question

I am creating a jobs page and was just making this when I ran across what I think is a styling problem.
If you look at the image below you can see the Apply button comes before the time and city but I want the Apply button to be farthest to the left but it will not position that way which only led me to believe this is a styling error on my part. Does anybody know why this would be? Code posted below.
HTML
<div class="job-case">
<h4>iOS Engineer</h4>
<span>Chicago</span>
Apply
</div>
CSS
.job-case {
height: 0 auto;
width: 0 auto;
background-color: white;
margin: 10px;
padding: 0 auto;
border-radius: 5px;
border: 1px solid none;;
}
.job-case:hover {
background-color: #F3EFF5;
border-color: #212121;
}
.job-case h4 {
color: #212121;
font-weight: bold;
font-size: 20px;
display: inline-block;
padding-left: 30px;
}
.job-case a {
float: right;
height: 0 auto;
margin-top: 17px;
padding: 10px;
color: #72b01d;
background-color: none;
border: 2px solid #72b01d;
border-radius: 5px;
}
.job-case a:hover {
background-color: #72b01d;
border-color: #72b01d;
color: white;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.job-case span {
float: right;
padding: 30px;
font-weight: bold;
font-size: 15px;
color: #212121;
}

Answer 1

It is not a styling issue. When using float:right on siblings they stack and they go to the right in the order they are in the DOM. so the first one with float:right will go to the farthest right.
So you need to change the html and put the a before the span
<div class="job-case">
<h4>iOS Engineer</h4>
Apply
<span>Chicago</span>
</div>
Demo at https://jsfiddle.net/g8kuve66/
Quoting the float specification
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.