MaterializeCSS Radio Buttons Inline Gap

Question

I am trying to display MaterializeCSS's radio buttons inline, but there is a gap between them. Any help would be appreciated!

Minimum Reproducible Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<label>
    <input name="group1" type="radio" />
    <span>Yes</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span>No</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span>I don't know</span>
</label>

Image displaying the issue:

Answer 1

I found a solution, just set style="padding-left: 24px;" to span.

Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<label>
    <input name="group1" type="radio" />
    <span style="padding-left: 24px;">Yes</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span style="padding-left: 24px;">No</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span style="padding-left: 24px;">I don't know</span>
</label>