JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<ul>
    <li>111</li>
    <li>222</li>
    <li>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
    </li>
    <li>444</li>
</ul>
</div>

<div class="two">
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<ul>
    <li>111</li>
    <li>222</li>
    <li>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
    </li>
    <li>444</li>
</ul>
</div>

CSS

.one ul:last-child {
    color: red;
}
.two ul :last-child {
    color: red;
}

.one, .two {
    float: left;
}