JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Zentai">
<ul>
    <li>あああああああああああああああああああああ</li>
    <li>いいいいいいいいいいいい</li>
    <li>ううう</li>
</ul>
</div>

CSS

/* 回答群全体にかかるstyle*/
div#Zentai  {
     position: absolute;
     width: 100%;
     left: 0; /*左寄せ*/
     bottom: 50px; /*下からの配置位置全画面から回答群までの距離*/
}



/*回答の各要素にかかっている*/
 ul li {
     width: 33%;
     float: left;
}

 ul li  {
     font-family: 'Lato', sans-serif;
     display: block;
     background-color: #fff;
     border-radius: 6px;
     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
     box-sizing: border-box;
     margin: 1px; /*計算が合わない*/
     color: #000;
     padding:10px; /*40px 30px;　*/
     border: 2px solid #AAAAA6;
     font-size: 1.3em;
     text-align: left; /*centerから変更　*/
     float:bottom;
     line-height: 1.3em;
     font-weight: bold;
     position: relative;
     height: 135px; /*    ここが今回の修正依頼の箇所　*/
}