jquery - Add padding-bottom when excerpt goes over a certain limit -

i'm trying write jquery conditional adds padding bottom of div when paragraph inside of on number of characters. i'm working on blog , front page has blog excerpts overlap each other on mobile if long. source code looks this:

<section class="lcp_catlist">     <div class="post-left"></div>     <div class="post-right">         <a href="#">blog title here</a>         <p>a long blog excerpt go here</p>     </div> </section> 

my jquery try tackle issue follows:

if ( $('div.post-right p').text().length > 200 ) {         $(this).parent().parent().css({"padding-bottom" : "45px"}); } 

obviously isn't working. feel simple solution i'm not finding. can help? in advance.

there couple of points suspicious, i'll outline thoughts:

1. .text() method

$('div.post-right p').html().trim().length > 200 

2. $(this)

make sure pointing right firing object

3. .parent() method

make sure .parent().parent() points node want - chrome's dev tools can here.

4. .css() alternative syntax

i'm not sure if makes difference, try these alternatives:

.css({paddingbottom: 45px}); 

and single property syntax

.css('paddingbottom', '45px');