JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mm">
    <p>Majid 123</p>
    <p>Majid 456</p>
    <p>Majid 789</p>
    <p>Majid 012</p>
    <p>Majid 123</p>
    <p>Majid 456</p>
    <p>Majid 789</p>
    <p>Majid 012</p>
</div>

CSS

.mm p{
    display: block;
    background: red;
    padding: 30px;
}
.mm p:nth-child(2n){
    float: right;
    margin-bottom: 80px;
    clear: right;
}
.mm p:nth-child(2n-1){
    float: left;
    margin: 80px 0;
    clear: left;
}