Horizontally align <li>'s of varying line numbers - html

Question

I've borrowed and modified this code from jsfiddle to the code snippet below. I want to be able to wrap text in some arrows and not in others. As you can see, a single line of text doesn't render in the same place and two lines. I want the text centered in the <li>, How do I fix?
ul.money-class {
/*margin: 20px 60px;*/
margin-bottom: 0px
}
ul.money-class li {
display: inline-block;
height: 60px;
line-height: 60px;
width: 150px;
margin: 5px 1px 0 0;
text-indent: 35px;
position: relative;
}
ul.money-class li:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: 0px;
border-style: solid;
border-width: 30px 0 30px 30px;
border-color: transparent transparent transparent #fff;
z-index: 0;
}
ul.money-class li:first-child:before {
/*border-color: transparent;*/
}
ul.money-class li a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -30px;
top: 0px;
border-style: solid;
border-width: 30px 0 30px 30px;
border-color: transparent transparent transparent #ccc;
z-index: 10;
text-decoration: none;
}
ul.money-class li.active a {
background: orange;
z-index: 100;
}
ul.money-class li.active a:after {
border-left-color: orange;
}
ul.money-class li a {
display: block;
background: #ccc;
}
ul.money-class li a:hover {
background: pink;
}
ul.money-class li a:hover:after {
border-color: transparent transparent transparent pink;
}
span {display: block; line-height: 30px;}
<table class="table">
<tr>
<td>
<ul class="money-class">
<li class="active"><span>Round 1</span><span>£100</span></li>
<li><span>Round 2</span><span>£200</span></li>
<li><span>Round 3</span><span>£300</span></li>
<li><span>Round 4</span><span>£400</span></li>
<li><span>Round 5</span><span>£500</span></li>
<li>Prize Pot</li>
</ul>
</td>
</tr>
</table>

Answer 1

You can add some inline style only for that line as in my comment
<li style="vertical-align:top"><span style="line-height:60px; height:60px">Prize Pot</span></li>
or
it could work by adding some css exception to the last li and its descendants, but it won't work if the single line is in a random position in the list...
ul.money-class {
/*margin: 20px 60px;*/
margin-bottom: 0px
}
ul.money-class li {
display: inline-block;
height: 60px;
line-height: 60px;
width: 150px;
margin: 5px 1px 0 0;
text-indent: 35px;
position: relative;
}
ul.money-class li:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: 0px;
border-style: solid;
border-width: 30px 0 30px 30px;
border-color: transparent transparent transparent #fff;
z-index: 0;
}
ul.money-class li:first-child:before {
/*border-color: transparent;*/
}
ul.money-class li a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -30px;
top: 0px;
border-style: solid;
border-width: 30px 0 30px 30px;
border-color: transparent transparent transparent #ccc;
z-index: 10;
text-decoration: none;
}
ul.money-class li.active a {
background: orange;
z-index: 100;
}
ul.money-class li.active a:after {
border-left-color: orange;
}
ul.money-class li:last-child {vertical-align:top}
ul.money-class li:last-child a span {line-height:60px}
ul.money-class li a {
display: block;
background: #ccc;
}
ul.money-class li a:hover {
background: pink;
}
ul.money-class li a:hover:after {
border-color: transparent transparent transparent pink;
}
span {display: block; line-height: 30px;}
<table class="table">
<tr>
<td>
<ul class="money-class">
<li class="active"><span>Round 1</span><span>£100</span></li>
<li><span>Round 2</span><span>£200</span></li>
<li><span>Round 3</span><span>£300</span></li>
<li><span>Round 4</span><span>£400</span></li>
<li><span>Round 5</span><span>£500</span></li>
<li>Prize Pot</li>
</ul>
</td>
</tr>
</table>

Answer 2

#UncaughtTypeError provided the right solution
Declare vertical-align: top on ul.money-class li