title: readmore.js put "readmore" link inside div not below
body: <p>I have created annotations which may or may not be long, so I want to use readmore.js plugin.
  As my annotation may be also empty, I have to set min height of div to be sure that all has same size (it is line of 4 objects)</p>
  
  <pre><code>&lt;annotation&gt;
    &lt;div style="width:100%;min-height:70px;overflow:hidden;"&gt;
      &lt;p&gt;&lt;%= p.annotation %&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/annotation&gt;
  </code></pre>
  
  <p>This is readmore.js part</p>
  
  <pre><code>&lt;script&gt;
  $('annotation').readmore({
    speed: 75,
    collapsedHeight: 60,
    moreLink: '&lt;a href="#"&gt;Ukáž viac&lt;/a&gt;',
    lessLink: '&lt;a href="#"&gt;Schovaj&lt;/a&gt;'
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My issue is when I have longer annotation, Read more text is put below the annotation tag, not inside, so everything below this div is moved by one line</p>
  
  <p><a href="https://i.stack.imgur.com/cxfY1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cxfY1.jpg" alt="enter image description here"></a></p>
  
  <p>Is there any way how to put "read more" link inside div/annotation so it will not move anything below?</p>
  
  <p>UPDATE: after first answer I found out I need a fixed height block for text and put inside read more only if necessary, thanks</p>
  
  <p>UPDATE2:
  ok found a solution for my problem, but it is workaround</p>
  
  <pre><code> &lt;% if p.annotation.length &lt; 90 %&gt;
                              &lt;div style="height:11px"&gt;&lt;/div&gt;
                              &lt;% end %&gt;
  </code></pre>