Process flow css arrows

Question

I'm trying to get some process flow arrow div's working. The idea is on the current process you would select someone to assign it to from a dropdown inside that current process and click a button to tell that person. That person will come in and on that process they'll see Accept or Reject buttons and then I'll open up the next process with a dropdown on who to assign again.

I'm having trouble just being able to get stuff to fit inside the process div. Things get all whacky. Ideally because they have "arrows" each process div would be a specific height that I set so it can handle the biggest height requirements inside (when buttons or dropdowns are inside).

I'm also not a huge fan of having to increase the left value by 30 pixels for each div arrow element. Any way to get this same look and feel without having to do that?

.arrow-container > div {
    float: left;
}

.arrow-left-done {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 40px solid #d8ffcc;
    border-bottom: 40px solid #d8ffcc;
    border-left: 40px solid transparent;
}

.arrow-ctr-done {
    display: inline-block;
    width: 150px;
    background: #d8ffcc;
    min-height: 80px;
    line-height: 80px;
    position: relative;
    text-align: center;
}

.arrow-right-done {
    display: inline-block;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #d8ffcc;
    position: relative;
}

.arrow-left-current {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 40px solid #99afff;
    border-bottom: 40px solid #99afff;
    border-left: 40px solid transparent;
}

.arrow-ctr-current {
    display: inline-block;
    width: 150px;
    background: #99afff;
    min-height: 80px;
    line-height: 80px;
    position: relative;
    text-align: center;
}

.arrow-right-current {
    display: inline-block;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #99afff;
    position: relative;
}

.arrow-left {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 40px solid #EBEBEB;
    border-bottom: 40px solid #EBEBEB;
    border-left: 40px solid transparent;
}

.arrow-ctr {
    display: inline-block;
    width: 150px;
    background: #EBEBEB;
    min-height: 80px;
    line-height: 80px;
    position: relative;
    text-align: center;
}

.arrow-right {
    display: inline-block;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #EBEBEB;
    position: relative;
}

<div style="display:inline-block;" class="arrow-container">
    <div id="zz" class="arrow-ctr-done">
        Changed/Tested
        Batman
    </div>
    <div id="zz" class="arrow-right-done"></div>
</div>

<div style="display:inline-block;position:relative;left:-30px" class="arrow-container">
    <div id="zz" class="arrow-left-current"></div>
    <div id="zz" class="arrow-ctr-current">
        Coding Standards
        <select>
            <option>John Smith</option>
            <option>Jane Doe</option>
            <option>Howdy Doody</option>
            <option>Batman</option>
        </select>
        <button>Assign</button>
    </div>
    <div id="zz" class="arrow-right-current"></div>
</div>

<div style="display:inline-block;position:relative;left:-60px" class="arrow-container">
    <div id="zz" class="arrow-left"></div>
    <div id="zz" class="arrow-ctr">
        Manager Approval
    </div>
    <div id="zz" class="arrow-right"></div>
</div>

<div style="display:inline-block;position:relative;left:-90px" class="arrow-container">
    <div id="zz" class="arrow-left"></div>
    <div id="zz" class="arrow-ctr">
        Implementor
    </div>
    <div id="zz" class="arrow-right"></div>
</div>

<div style="display:inline-block;position:relative;left:-120px" class="arrow-container">
    <div id="zz" class="arrow-left"></div>
    <div id="zz" class="arrow-ctr">
        Validator
    </div>
    <div id="zz" class="arrow-right"></div>
</div>