JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Before</h3>

<ul id="before">
    <li><input name="cat_checks" type="checkbox" value="Value" /> Some really really very long text right here</li>
    <li><input name="cat_checks" type="checkbox" value="Value" /> Some really really very long text right here</li>
    <li><input name="cat_checks" type="checkbox" value="Value" /> Some really really very long text right here</li>
</ul>

<h3>After</h3>

<ul id="after">
    
    <li><input name="cat_checks" type="checkbox" value="Value" /> Some really really very long text right here</li>
    <li><input name="cat_checks" type="checkbox" value="Value" /> Some really really very long text right here</li>
    <li><input name="cat_checks" type="checkbox" value="Value" /> Some really really very long text right here</li>
</ul>

CSS

#before li {
    display: inline;
    padding: 5px;
}

#after li {
    float: left;
    padding: 5px;
}