JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <ul class="cul">
            <li class="cli">
                <div class="img"></div>
                <div>PRETTY LONG TEXT ABCDEFG</div>
            </li>
            <li class="cli">
                <div class="img"></div>
                <div>TEXTUAL PLANNING</div>
            </li>
            <li class="cli">
                <div class="img"></div>
                <div>PRETTY TEXT</div>
            </li>
            <li class="cli">
                <div class="img"></div>
                <div>RANDOM TEXT ABC</div>
            </li>
            <li class="cli">
                <div class="img"></div>
                <div>MEDIUM TEXT</div>
            </li>
        </ul>

</div>

CSS

.cul{
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0px auto 0;
}

.cli{
    display: inline-block;
    width: 10%;
    padding: 0px 25px 0;
    background-size: 46px;
    vertical-align: top; /* NEW */
    text-align: center; /* NEW */
}

.cli .img{
    background: url("https://www.gravatar.com/avatar/3906f6fa3d7c00158d98abe7540054c8/?default=&s=64") no-repeat;
    width: 46px;
    height: 46px;
    margin: 0 auto 10px; /* ADJUSTED */
}