Is there a way to arrange elements inside a div without modifying the HTML code? Yes, CSS can help you achieve this.
Consider these blog posts:
The issue at hand is that the 'Read more' button gets pushed down when the title or content of the post is too long. To fix this, you want the button to always remain fixed at the bottom of the blog post, similar to how it appears in the second post.
Here is the snippet of code currently being used:
<div class="contact_con blog-posts">
<div class="loop-entry-thumbnail">
<a href="http://staging.princetonpartners.com/the-magic-of-viceland/" title="The Magic of Viceland">
<img src="http://staging.princetonpartners.com/wp-content/uploads/The-Magic-of-Viceland.jpg" alt="The Magic of Viceland" title="The Magic of Viceland" width="100%">
</a>
</div>
<div class="loop-entry-content clr">
<header>
<h2 class="loop-entry-title entry-title">
<a href="http://staging.princetonpartners.com/the-magic-of-viceland/">The Magic of Viceland...</a>
</h2>
</header>
<div class="loop-entry-excerpt entry clr blog_loop_entry_title">
I’m part of a generation that rarely watches traditional cable news, and instead ab...<br>
<span class="home_readmore home_readmore_button"><a href="http://staging.princetonpartners.com/the-magic-of-viceland/">Read more</a></span>
</div>
</div>
</div>
I have experimented with position: absolute and relative, but unfortunately, they did not solve the problem at hand.