Dwa elementy w jednej linii

Cześć, zaczynam swoją przygodę z fron-endem, więc proszę o wyrozumiałość :)
Korzystam z frameworka Materialize.Chciałbym aby dwa elementy wyświetlały się w jednej linii. Próbowałem z różnymi klasami left right inline, ale nic mi nie wychodzi.

<div class="col s4">
    <ul class="collection with-header">
        <li class="collection-item"><h4>ToDo List:</h4></li>
        <li class="collection-item" th:each="toDo : ${toDoList}">
            <p class="" th:text="${toDo}"></p>
            <a class="collection-item" href="#">
                <i class="small material-icons">remove</i>
            </a>
        </li>
    </ul>
</div>

Chciałbym, żeby ikonka - była po prawej stronie tekstu.
Da się to zrobić nie pisząc własnego css?

spróbuj zamienić p <p class="" th:text="${toDo}"></p> na span:
<span class="" th:text="${toDo}"></span>
w zasadzie nie tyle o span chodzi, co o fakt, że span ma domyślnie styl display: inline, więc nie robi nowej linii, tak jak ją robi <p>.

Przynajmniej tyle, co na sucho mogę się domyśleć patrząc na kod.

Da się to zrobić nie pisząc własnego css?

frameworki do CSSa to dziurawa("wyciekająca") abstrakcja (leaky abstraction - https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/ ) czyli zawsze wcześniej czy później będziesz musiał albo pisać własnego CSSa, albo przynajmniej znać podstawowe zasady rządzące się CSSem (nawet jeśli będziesz korzystać z gotowych klas). W szczególności - bardzo często zrobienie czegoś we frameworku jest trudniejsze niż zrobienie tego pisząc własny CSS (no ale frameworków CSS się używa bardziej do ogólnego oskórkowania czy do zrobienia layoutu na większą skalę, natomiast operacje typu "wyrównanie drobnego elementu gdzieś na stronie" wcale nie są łatwiejsze z użyciem frameworka.

możesz wykorzystać klasy samego materialize secondary-content right

Opcja ze spanem zadziałała, ale niestety secondary-content już nie :(
Teraz wygląda to tak:

<div class="col s4">
    <ul class="collection with-header">
        <li class="collection-item"><h4>ToDo List:</h4></li>
        <li class="collection-item" th:each="toDo : ${toDoList}">
            <span class="secondary-content left" th:text="${toDo}"></span>
            <button class="btn-floating waves-effect waves-light red" type="submit" name="removeToDo" th:value="${toDo}">
                <i class="small material-icons secondary-content right">remove</i>
            </button>
        </li>
    </ul>
</div>

PS. Pewnie będzie trzeba kupić książkę :P