移动端界面左右分栏

<div class="listAll">
        <div class="singleList">
            <div class="showImg">
                <img src="image/showMsg.png" alt="">
            </div>
            <div class="showMsg">
                <p class="coupon"><span>自助餐优惠券</span></p>
                <p class="couponTitle"><small>悠闲下午茶配上一杯香浓咖啡!</small></p>
                <p class="detail">
                    <span>￥</span><strong>88</strong>
                    <button>查看详情</button>
                </p>
            </div>
        </div>
        <div class="singleList">
            <div class="showImg">
                <img src="image/showMsg.png" alt="">
            </div>
            <div class="showMsg">
                <p class="coupon"><span>自助餐优惠券</span></p>
                <p class="couponTitle"><small>悠闲下午茶配上一杯香浓咖啡!</small></p>
                <p class="detail">
                    <span>￥</span><strong>88</strong>
                    <button>查看详情</button>
                </p>
            </div>
        </div>
    </div>

.listAll{
    overflow: hidden;
}
.singleList{
    display: flex;
    padding: 0.12rem 0.07rem;
    background: #ffffff;
    border-bottom: 1px solid #dcdcdc;
}
.singleList div{
    flex: 1;
}
.showImg{
    width: 1.96rem;
    height: 1.125rem;
    background-size: contain;
}
.showImg img{
    width: 100%;
    height: 100%;
}
.showMsg{
    padding-top: 0.33rem;
    padding-left: 0.05rem;
}
.coupon span{
    font-size: 0.17rem;
    color: #a18e63;
}
.couponTitle small{
    font-size: 0.11rem;
    color: #9b9b9b;
}
.detail strong{
    color: #a18e63;
    font-size: 0.24rem;
}
.detail span{
    color: #a18e63;
}
.detail button{
    height: 0.235rem;
    border-radius: 5px;
    color: #a18e63;
    background: #ffffff;
    border: 1px solid #a18e63;
    font-size: 0.12rem;
    float: right;
    margin-top: 0.09rem !important;
}