いつもお世話になっております。
アイテムをliタグを使って3列に並べたいのですが、
ボタンを2列で設置したとき、flexがうまく効いておらず
縦がそろいません。
ボタンの方でposition: relative;を利用しているのが原因だとは思うのですが、
relativeを使わず、ボタンを2列に配置するのが難しく
手詰まり状態です。

何か解決策がございましたら、ご教示の程よろしくお願いいたします。


【ソースコード】
・HTML


<ul class="item-list">

<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"><span class="y"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/seiko-07/lukia-pair10_1.jpg"/></span></a>
<h4>タイトル</h4>
<p>あああああああああああああああああああああああああああああああああああああああああああああああ</p>
<div class="btn-wrap btn-wrap-pc-sp2">
<a href="URL" class="btn btn--contact">
楽天市場で購入
</a>
<a href="URL" class="btn btn--tel">
PayPayモールで購入
</a>
</div>
</li>

<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"><span class="y"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/seiko-07/lukia-pair10_1.jpg"/></span></a>
<h4>タイトル</h4>
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<div class="btn-wrap btn-wrap-pc-sp2">
<a href="URL" class="btn btn--contact">
楽天市場で購入
</a>
<a href="URL" class="btn btn--tel">
PayPayモールで購入
</a>
</div>
</li>


<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"><span class="y"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/seiko-07/lukia-pair10_1.jpg"/></span></a>
<h4>タイトル</h4>
<p>あああああああああああああああああああああああああああああああああああああああああああああああ</p>
<div class="btn-wrap btn-wrap-pc-sp2">
<a href="URL" class="btn btn--contact">
楽天市場で購入
</a>
<a href="URL" class="btn btn--tel">
PayPayモールで購入
</a>
</div>
</li>
</ul>


・CSS

ul.item-list {
width:1000px;
max-width: 100%;
margin:0px auto 20px;
padding:0;
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
text-align: center;
justify-content: center;
}


.flex > *:first-child > *{ width:100%; }

/*
ul.item-list li:first-child{
margin-right:4%;
}*/




ul.item-list li {
width:26.5%;
background: #fff;
list-style:none;
padding:1.5% 1.5% 2%;
margin:0 1.7% 20px;
position: relative;
}


ul.item-list li.big {
width:41.5%;
padding:1.5% 2.2% 2%;
}



ul.item-list li img {
width:100%;
margin:0;
padding:0;
}

@-moz-document url-prefix() {
ul.item-list li img {
width:100%;
margin:0;
padding:10px 0 0;
}
}


ul.item-list li h4 {
font-size:120%;
word-break: break-all;
text-align:center;
margin:5px 0;
padding:0;
}

ul.item-list li h4:before {
font-size:120%;
word-break: break-all;
text-align:center;
margin:5px 0;
padding:0;
}

@media screen and (max-width:639px){

ul.item-list li h4 {
font-size:95%;
padding:0;
margin:2% 0 0;
}
}





ul.item-list li p {
padding:0 0 25px;
font-size:15px;
line-height:160%;
letter-spacing:normal;
}


@-moz-document url-prefix(){
ul.item-list li p {
padding:0 5% 65px;

}
}

@media screen and (max-width:639px){

}


ul.item-list li p.cart a {
width:90.5%;
background: #000;/* チェックボタンの色 */
border-bottom:2px solid #619BC0;/* チェックボタンの下線色 */
text-align:center;
padding:8px 0;
margin:0;
position: absolute;
bottom: 15px;
color: #fff;/* チェックボタンの文字色 */
font-size: 100%;
}


ul.item-list li p.cart a:hover {
color: #fff;
background:#036ecf;
}

@media screen and (max-width:639px){

ul.item-list {
width:100%;
margin:0 auto 0px;
padding:0;
}


ul.item-list li {
width:100%;
list-style:none;
padding-bottom:30px;
margin:0 1% 15px;
}


ul.item-list li.big {
width:90%;
padding:1.5% 2.2% 5%;
}

ul.item-list li p {
margin:0;
padding:0 2% 5%;
font-size:12px;
}


ul.item-list li p.cart a {
width:92%;
padding:8px 0;
margin:0;
position: absolute;
bottom:2%;
left:3%;
font-size: 100%;
}}


.btn,
a.btn,
button.btn {
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
bottom: 15px;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}

.btn-wrap-pc-sp {
max-width: 435px;
margin: 0 auto 20px;
}

a.btn-pc-sp {
line-height: 1.4;
width: 49.5%;
padding: 1.25rem 0;
color: #ffff;
}

a.btn--contact {
display: block;
padding: 1rem 0;
color: #fff;
background: #bf0000;
}

a.btn--contact i {
font-size: 2rem;
}

a.btn--contact i.fa-position-left {
font-size: 3rem;

left: 2rem;
}

a.btn--contact :hover {
color: #fff;
}

a.btn--tel {
display: block;
margin-top: 15px;
padding: 1rem 0;
color: #fff;
background: #9a812e;
}

a.btn--tel i {
font-size: 2rem;
}

a.btn--tel i.fa-position-left {
font-size: 3rem;
left: 2rem;
}

a.btn--tel .number {
line-height: 1;
display: inline-block;
margin-top: 0.5rem;
padding: 0.25rem 2rem;
letter-spacing: 0;
color: #094;
border-radius: 0.5rem;
background: #fff;
}

a.btn--tel:hover {
color: #fff;
}

.fa-position-left {
position: absolute;
top: calc(50% - 0.5em);
left: 1rem;
}

.fa-position-right {
position: absolute;
top: calc(50% - 0.5em);
right: 1rem;
}