Раскраска части текста в разборном заголовке MaterializeCSS

Question

Я использую Materialise 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 к заголовку разбивает заголовок на два столбца, например:

Я не хочу, чтобы это делилось так; имея все встроенное, как это:

Название Краткое описание для включения в заголовок

Хорошо бы.

Пока оно будет разделено, я бы хотел, чтобы два столбца имели одинаковую ширину (отсюда и директива width в css выше).

Вот кодекс