Simple float right with vertical align

by gradbot

HTML

<div class="d1">
    <div class="d2 test1">
        <div class="dropdown"><div class="caret">^</div></div>
        <div class="input"></div>        
        <div class="input"></div>
    </div>    
</div>

<div class="d1">
    <div class="d2 test2">
        <div class="dropdown"><div class="caret">^</div></div>
        <div class="input"></div>        
        <div class="input"></div>
    </div>    
</div>

CSS

div {
    padding: 0;
    margin: 0;
}

.d1 {
    margin: 10px;
    background: gray;
    height: 70px;
}

.d2 {
    position: absolute;
    width: 200px;
    height: 60px;
    background:gray;
}

.input {
    width: calc(100% - 51px);
    height: 29px;
    background: blue;
    margin-bottom: 1px;
}

.dropdown {
    width: 50px;
    height: 100%;
    float: right;
    background: red;
}

.caret {
    background: orange;
}

.test1 .dropdown {
    display: table;
}

.test1 .caret {
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}

.test2 .dropdown {
    position: relative;
}

.test2 .caret {
    position: absolute;
    top: 50%;
    left: 50%;
    
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}