Custom breadcrumb css stretch issue - css

Question

I've created a custom breadcrumb in jsfiddle http://jsfiddle.net/jimbodeni/Ata9k/ . When you shrink the width of the page the text is on 2 lines on the last 2 breadcrumbs but is only on one line on the first breadcrumb. This causes the grey background to be out of line on the first breadcrumb with the other 2.
How can I get this to always be the max height of the largest breadcrumb so they're all uniform height no matter if one has got one line of text and another 2 lines of text?
<div id="breadcrumb-container">
<ul class="breadcrumb">
<li>Surgery Started</li>
<li class="current">Surgery Started</li>
<li>Surgery Compl'd</li>
</ul>
</div>
div#breadcrumb-container {
width:100%;
}
div#breadcrumb-container li {
width: 33%;
}
div#breadcrumb-container li:last-child {
width: 34%;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 13px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
background: #C7C7C7;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 5px 5px 5px 45px;
position: relative;
display: block;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #C7C7C7;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #001940;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 3px;
left: 100%;
}
.breadcrumb li:first-child a {
padding-left: 12px;
border:none;
}
.breadcrumb li:last-child a:after {
border:none;
}
.breadcrumb .current {
background:#007ACC; color:#fff;
pointer-events: none;
cursor: default;
}
.breadcrumb .current a:after {
border-left-color:#007ACC;
pointer-events: none;
cursor: default;
}
.breadcrumb li a:hover { background: #007ACC; }
.breadcrumb li a:hover:after { border-left-color: #007ACC !important; }
Also, how do I get all 3 breadcrumbs to be exactly the same size? At the minute the first one is bigger than the other 2.
Thanks in advance to anyone who can help!