JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="content">
<div class="line-1">Line 1</div>
<div class="line-2">Line 2</div>
<div class="line-3">Line 3</div>
<div class="line-4">Line 4</div>
<div class="line-5">Line 5</div>
<div class="line-6">Line 6</div>
<div class="line-7">Line 7</div>
<div class="line-8">Line 8</div>
<div class="line-9">Line 9</div>
</div>
<div class="buttons">
</div>
</div>
<div class="container">
<div class="content">
<div class="line-1">Line 1</div>
<div class="line-2">Line 2</div>
<div class="line-3">Line 3</div>
<div class="line-4">Line 4</div>
<div class="line-5">Line 5</div>
<div class="line-6">Line 6</div>
</div>
<div class="buttons">
</div>
</div>
CSS
.container
{
margin-bottom: 20px;
}
.content
{
overflow: hidden;
/*height: 100px;*/
padding: 10px;
border: 1px solid #ccc;
}
JavaScript
$(".content").each(function(){
if($(this).height() > 100){
$(this).css("height","100px");
$(this).next(".buttons").append( "<button>Up</button><button>Down</button>" );
}
});