JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <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

.wrap{
    width: 100px;
    overflow: hidden;
    position: relative;
}

strong{
    font-weight: 700;
}
.one, .two, .three{
    width: 100px; 
    margin-bottom: 10px;
    background: yellow;     
    
}

.two{    
    position: absolute;
    top: 0;
    background: green;
}