怎样用html实现以下布局

我自己试过把每一个字拆成一个span 但是这个方法我觉得不好,求更好的方法
相关代码

<style>
 ul li{
  display: flex;
  width: 100px;
  background: #eee;
  justify-content: space-between;
}
</style>
<ul>

 <li>AB</li>
<li>ABC</li>
<li>ABCD</li>

英文字一定要用空格拆分开，不然当做一个word是不会隔开来显示的
参考解释:https://www.jb51.net/css/5027...

 .justify>span{
    width: 100px;
    height: 20px;
    border: 1px solid red;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    color: #ccc;
    text-align: justify;
}

.justify>span:after{
    content: ' ';
    display: inline-block;
    width: 100%;
}

<div class="justify">
    <span>A B</span>
    <span>A B C</span>
    <span>A B C D</span>
</div>

ul li{
    width: 100px;
    background: #eee;
    text-align: justify;
    text-align-last: justify;
}
</style>
<ul>
<li>A B</li>
<li>A B C</li>
<li>A B C D</li>
</ul>

注意字母之间要有空格，否则就是一个单词，单词是不能被拆分的

这不是两端对齐吗？

 <style>
     ul li{
            height: 32px;
            line-height: 32px;
     }
     ul li span{
            width: 100px;
            height: 32px;
            text-align: justify;
            display: inline-block;
     }
    ul li span:after{
            content: "";
            width: 100%;
            height: 0;
            display: inline-block;
     }
 </style>
 <ul>
        <li><span>A B</span></li>
        <li><span>A B C</span></li>
        <li><span>A B C D</span></li>
 </ul>