Javascript MDL MDL布局分隔符强制内容到下一行

这是一个非常基本的材料设计问题，但这已经让我发疯了。在中的以下示例中，带有类mdl布局间隔符的div将其后面的元素很好地定位到包含div的右侧。请注意，日历图标位于右侧：

不，那不是真的。mdl布局间隔类不特定于图标。 检查我创建的这个。我用文本代替图标，效果很好

在卡片示例中，您使用了以下样式：

.demo-card-event>.mdl-card__actions {
    display: flex;
    box-sizing: border-box;
    align-items: center;
}

这是将元素向右推的代码。我用同样的css来修复你的例子

已编辑：您的示例不起作用，因为您的元素没有display:flex css。因此，只需将此css添加到父类：

.mdl-card__supporting_text {
    display: flex;
}

.demo-card-event>.mdl-card__actions {
    display: flex;
    box-sizing: border-box;
    align-items: center;
}

.mdl-card__supporting_text {
    display: flex;
}