html里 怎么让两段文字单独成一块 中间隔开 两边一样

怎么让两端文字一段在左边 一段在右边 ,中间隔开,两边一样 如图所示

img

用浮动也是可以的

flex布局,然后两边的文字分别设置text-align:right/left


<div class="wrap">
        <div>
            <p>SADASDSADSDSPLKASX</p>
            <p>WQIOEOIWQENMC</p>
            <p>SMAKSKA</p>
            <p>KASLDDCKSA</p>
        </div>
        <div>
            <P>POASPDKSAqwsasdasd</P>
            <P>POSQAPDEPSWD</P>
            <P>QWEQE</P>
            <P>WRQEQWRFE</P>
        </div>
    </div>
.wrap{
           width: 400px;
           height: 100px;
           display: flex;
           justify-content:space-between;
        }
        .wrap div:nth-child(1){
            text-align: right;
        }
        .wrap div:nth-child(0){
            text-align: left;
        }