JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://www.500milligrammes.com/facticemagazine/final/addon/news/readmore.js"></script>
<img class="abs" src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>

<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 0px auto">
<p>Exclusive&nbsp;&nbsp;/&nbsp;&nbsp;July 15, 2015<br/>
Serafima by Edwin S Freyer</p>
</div>

</article>
</section>

CSS

#demo { margin: 0; max-width: 350px; text-align:center;}
h2 { margin: 0px; padding:0px;}
section { border:1px solid #eee; padding:20px; max-height:475px;}
h2, .credit { margin-top:0px!important; }

.abs, #demo{position:absolute; bottom:0; max-width:350px;  }

JavaScript

$('article').readmore({speed: 500});