CSS ul Li left aligned, newline

. Info-warp{Min-height:20rem;background:#ffffff;text-align:Center;padding:1.4rem;}. Jx_ul-info-list{margin:2rem Auto;text-align: Left;Display:Inline-block;List-style-type:None;}. Jx_ul-info-list Li label{width:50%;Display:Inline-block;text-align: Right;vertical-align:Top;}. jx_ul-info-list Li Span{width:50%;Display:Inline-block;}

 <Divclass= "Info-warp">        <Pclass= "Success-text">Congratulations to you! Registration successful</P>        <ulclass= "Jx_ul-info-list">            <Li>                <label for="">Event Name:</label><span>Crossfit</span>            </Li>            <Li>                <label for="">Project Name:</label><span>Crossfit May</span>            </Li>            <Li>                <label for="">Name:</label><span>Aa</span>            </Li>            <Li>                <label for="">Event Name:</label><span>0001</span>            </Li>            <Li>                <label for="">Venues:</label><span>Stadium venues venues venues venues venues venues</span>            </Li>        </ul>        <Divclass= "Weui_btn_area weui_btn_area_inline">            <ahref= "javascript:;"class= "Jx_btn bg-blue2-b">View my Schedule</a>            <ahref= "javascript:;"class= "Jx_btn weui_btn_blue">View Other Items</a>        </Div>    </Div>

achieve left and right symmetry, word wrapping

CSS ul Li left aligned, newline