在MaterializeCSS可折叠标题中为文本着色

Question

我正在使用Materialize 1.0.0

我想为物化可折叠标头的前几个单词涂上颜色，所以我使用了这个：

.title {
  color:blue;
  width:100px;
}

<ul class="collapsible" data-collapsible="expandable">
   <li>
     <div class="collapsible-header"><span class="title">Panel title</span>Some other text that is long enough to wrap to the next line.Some other text that is long enough to wrap to the next </div>
     <div class="collapsible-body"><p>First Things First</p></div>
   </li>
</ul>

在标题中添加span元素会将标题分为两列，如下所示：

我不一定要像那样将其拆分；一切都像这样内联：

标题要包含在标题中的简短描述

会没事的。

不过，只要要将其拆分，我希望两列具有相等的宽度（因此，上述CSS中的'width'指令。）

Here's a codepen