JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div style="position:relative;" class="two">
        <strong>This should be first..</strong>  
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor diam eget lorem vehicula aliquam. Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien.</p>        
    </div>
    <div class="one">
        <strong>This should not be first..</strong>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
    </div>
    <div class="two">
        <strong>This should be first..</strong>  
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor diam eget lorem vehicula aliquam. Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien.</p>        
    </div>
    <div class="three">
        <strong>This can be 2nd or third.</strong>
           <p> Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien, bibendum sed eleifend non, pretium eget arcu. Vivamus et augue nec quam rutrum tempor in in urna. </p>
    </div>
</div>

CSS

.one, .three{
width: 100%;
margin-bottom: 10px;
background: yellow;     
float:right;
}
.two{    
position: absolute;
top: 0;
background: green;
left:0;
width:100%;
margin-bottom:10px;
}