JSFiddle - React, Tailwind, and code Playground

HTML

<div class="innerLeft">
    <ul>
        <li><a href="">Fruit</a></li>
        <li>
            <ul>
                <li><a href="">Apples</a></li>
                <li><a href="">Apples</a></li>
                <li><a href="">Apples</a></li>
                <li><a href="">Apples</a></li>
                <li><a href="">Apples</a></li>
                <li><a href="">Apples</a></li>
                <li><a href="">Apples</a></li>
                <li><a href="">Apples</a></li>
            </ul>
        </li>
        <li><a href="">Vegetable</a></li>
    </ul>
</div>

CSS

.innerLeft ul {
	width:199px;
	float:left;
	margin:0px;
	padding:0px 0 0 12px;
	list-style:none;
	min-height:10px;
}
.innerLeft ul li{
	padding:0px;
	margin:0px 0 10px 0;
	height:18px;
    clear: left;
}
.innerLeft ul li a{
	background: red;
    display:block;
}
.innerLeft ul li ul li a{
    background: blue;
}