使用CSS將兩個圖標彼此對齊

Question

我有兩個要互相對齊的圖標，一個在div的頂部，另一個在div的底部。

這是我要實現的目標的圖像-因此，燈泡圖標在頂部對齊，圓圈/十字在底部對齊，一個在另一個下方：

我試圖使此工作正常，但每次嘗試均失敗。

這是我目前所擁有的圖像：

這是我的HTML代碼：

<div class="controls {{ control_classes }}">
    <span id="row_{{ field.auto_id }}">{{ field }}</span>
    <span id="row_icons_{{ field.auto_id }}" style="width: 20px;">
        <i id="id_icon_{{ field.auto_id }}" class="fa fa-lightbulb-o blue_color icon_size26 verticalAlignTop"></i>
        <i id="id_icon_reset_{{ field.auto_id }}" class="fa fa-ban blue_color icon_size20 verticalAlignBottom" rel="tooltip" html="true" data-placement="top" title="{% trans 'Clear' %}"></i>
    </span>
    <span id="row_split_{{ field.auto_id }}" class="textAreaSplitContainer"></span>
</div>

這是我的CSS代碼：

.form-horizontal .controls {
    margin-left: 165px;
}

.verticalAlignTop {
    vertical-align: top;
}

.verticalAlignBottom {
    vertical-align: bottom;
}

.textAreaSplitContainer {
    background-color: #f6f6f6;
    border: 1px solid #d9d9d9;
    display: inline-block;
    height: 200px;
    max-height: 600px;
    max-width: 45%;
    min-height: 100px;
    min-width: 45%;
    overflow: scroll;
    overflow-x: hidden;
    padding: 10px;
    resize: none;  /* container is resized by resizing the textarea */
    vertical-align: top;
}

Answer 1

給重置圖標一個負的左邊距等於它的寬度應該可以解決這個問題：

[id^="id_icon_reset"] { margin-left: -20px; }

這是我能盲目的幫助的。 如果它不起作用，我需要將小提琴/ codepen / snippet中的問題復制到所有CSS上。