Html 使用css将两个图标相互对齐

我有两个图标，我想在下面彼此对齐，一个在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>

---

给重置图标一个等于其宽度的负左边距应该可以做到：

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

---

这是我所能盲目帮助的。如果它不起作用，我需要在一个fiddle/codepen/snippet中重现问题，并应用所有CSS。

Andrei-BOOM！就在钱上！非常感谢你。当你知道怎么做的时候就这么简单了。

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