javascript - Script for detecting height and changing padding -

i have chunk of text. there title in chunk of text. can either 25 or 50 pixels high depending if it's 1 or 2 lines. title p tag inside of div css aspect of height: auto;. using script detect height of div. default div 25 high 1 line. if nothing changes. if 50 pixels high, should include style tags still inside changing padding of different dive moving text around. have script running (it doesn't work why requesting help):

<script>  $(document).ready(function () {  	if ($('.rtitle').height() == 50) {  	document.write("<style>      div#raffleinfo {      	height: 127px;      	padding-top: 173px;      }</style>)";  	}  });  </script>

div#raffledisplay {  	height: 300px;  	width: 100%;  	position: relative;  }    div#raffleinfo {  	float: left;  	width: 480px;  	height: 102px;  	padding-top: 198px;  	background-color: red;  }    div#rtitle {  	height: auto;  }    p.rtitle {  	font-size: 35;  	line-height: 25px;  }    p.rinfo {  	font-size: 25;  	line-height: 25px;  }    #progressbar {  	width: 478px;  	height: 25px;  	border: 1px solid #111;  	background-color: #292929;  }

<div id="raffledisplay">  	<div id="raffleinfo">  		<div id="rtitle"><p class="rtitle">$weapon | $skin $stattrack</p></div>  		<p class="rinfo">quality: $quality</p>  		<p class="rinfo">price: $price</p>  		<div id="progressbar" class="pbar"><div></div></div>  	</div>  </div>

i not sure why it's displaying weird if run code, on website looks fine...

try this

$(document).ready(function() {      // console.log($('.rtitle').height());    if ($('.rtitle').height() == 50) {      $("div#raffleinfo").addclass('larger');    }  });

div#raffledisplay {    height: 300px;    width: 100%;    position: relative;  }  div#raffleinfo {    float: left;    width: 480px;    height: 102px;    padding-top: 198px;    background-color: red;  }  div#raffleinfo.larger {    height: 127px;    padding-top: 173px;  }  div#rtitle {    height: auto;  }  p.rtitle {    font-size: 35;    line-height: 25px;  }  p.rinfo {    font-size: 25;    line-height: 25px;    //background-color: green;  }  #progressbar {    width: 478px;    height: 25px;    border: 1px solid #111;    background-color: #292929;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div id="raffledisplay">    <div id="raffleinfo">        <div id="rtitle">        <p class="rtitle">$weapon $skin $stattrack xxxxxxxx xx xxx xx  xxxxxxx xxxxxxxxx xxxxxxx xxxxx </p>      </div>        <p class="rinfo">quality: $quality</p>      <p class="rinfo">price: $price</p>        <div id="progressbar" class="pbar">        <div>        </div>      </div>