JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="container">
    <div class="row">
        <span class="text">
             Some loooooong text, blah bli blupp ..
        </span>
            
        <span class="moretext">
            Hello World, hello, hello!    
        </span>
    </div>        
    
    <div class="row">
        <div class="readmore">read more</div>
    </div>
</div>

CSS

.container {
    width: 200px;
    height: 100px;
    border: 1px solid red;
    display: table;
}

.moretext {
    display: none;
}

.text, .moretext {
    float: left;
}

.row {
    display: table-row;
}

.text {
    display: table-cell;
    vertical-align: top;
}

.readmore {
    display: table-cell;
    vertical-align: bottom;
}

JavaScript

$('.readmore').click(function() {
    
    $('.moretext').slideToggle();
    
});