Javascript 当文本和图标对齐在同一行时，自定义卡组件没有响应

我制作了自己的自定义卡片组件，从零开始学习CSS和HTML

这是我的HTML代码：

<div class="col-12">
    <div>
        <div class="search-event-block">
            <div class="search-event-icon-left">
                <i class="icon-horse search-event-icon-left-size"></i>
            </div>
            <div class="search-event-block-inner">
                <div class="search-event-block-title">
                    <label class="search-event-block-padding ">Title</label>
                </div>
                <div class="search-event-block-subtitle">
                    <label class="search-event-block-padding">Subtitle<i class="icon-basket search-event-icon-right-size"></i></label>
                </div>
                <div class="search-event-block-links ">
                    <label class="search-event-block-padding">Go block | Delete block</label>
                </div>
            </div>
        </div>

    </div>
</div>

问题出在类中：

搜索事件块subtitle

。我希望字幕和图标在同一行。图标必须与卡的末端对齐。这很好，但是当我调整窗口大小时，图标会在副标题下显示。当屏幕变小时，我希望图标仍然与字幕保持在同一行

我只对cols和rows使用bootstrap。我试过这样做：

<div class="row">
//col6
label
//col6
icon
</div>

//可乐6
标签
//可乐6
偶像

这对我不起作用

当屏幕变小时，如何将字幕和图标对齐在同一行上

我也有高度的问题，它不能自动缩放。我如何解决这个问题

我做了一个jsfiddle：

---

第一步是将字幕层更新为：

<div class="search-event-block-subtitle">
    <label class="search-event-block-padding">Subtitle</label>
    <i class="icon-basket search-event-icon-right-size"></i>
</div>

并将“搜索事件图标正确大小”类更新为：

.search-event-icon-right-size {
    font-size: 21px;
    color: #1B4593;
    width: 60px;
    display: inline-block;
    vertical-align: top;
}

搜索事件块字幕标签中的宽度计算为100%-84px，因为您应该减去图标的宽度和搜索事件块字幕标签的填充。您应该根据要使用的图标的实际大小调整这些数字

---

我希望这能有所帮助。

谢谢您抽出时间，这很好用！现在的问题是，当图标缩放链接时，链接会跳出框外。有没有办法将

高度设置为自动？在.search事件块类中，可以将高度设置为87px。您可以将其删除，将其更改为最小高度：87px或设置overflow-y:auto。如果答案回答了您最初的问题，请接受。您删除了最新的问题。我成功了。正如你所看到的，这个问题似乎没有发生。如果你还需要帮助，请考虑删除它并添加相关信息。还是关于我用CSS删除的
.table
下边距？
.search-event-block-subtitle label {
    width: calc(100% - 84px);
    display: inline-block;
}

.search-event-icon-right-size {
    font-size: 21px;
    color: #1B4593;
    width: 60px;
    display: inline-block;
    vertical-align: top;
}