I discovered that the presence of a Link or really any HTML outside of p tags, in the description of any article in "Content Pro" can break the layout of the article in question.

I had a beautiful horizontal scroll of articles except for one, where the "read more" button was covering the bottom of the description.
The code for that article, looks like this (edited for brevity):

Good article

<div class="g-info-container">

<h4 class="g-content-pro-title"><a *link*></h4>

				

<div class="g-content-pro-desc"><p>*text*</p>...</div>

				

<div class="g-article-read-more">

<a class="button" href="/*link*" draggable="false">Read More...</a>

</div>

</div>

Bad article

<div class="g-info-container">

<h4 class="g-content-pro-title"><a*link*></h4>



<div class="g-content-pro-desc"><p>*text*</p>...</div>



<div class=" g-article-read-more"="" draggable="false">

</a><a class="button" href="/link" draggable="false">Read More...</a>

</p>

</div>

</div>

Note the closing /a and /p tags in the second article code. They did a number on the layout.

The way I solved it, and I didn't go any further for the moment as I have more pressing issues, was to remove the title tag from a link that is at the beginning of the article.
I also suspect that HTML present before the character count may affect the length or layout of the description in the same particle.

One other issue I had was that the alignment of the "Read More" at the bottom was all over the place. That's because the article columns are narrow and the font is not monospaced. I solved that by giving "g-info-container" a value of 300px, which works for me.
Isn't there a programmatical solution to having the "Read More" in horizontal alignment? One better than my heavy handed one?

Thank you for this consideration. I hope it can help others and maybe lead to a refinement of this otherwise excellent particle.