JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<table cellspacing="0" rules="all" border="1" id="gvQAMsg" style="border-collapse:collapse;">
		<tr>
			<th scope="col">QA Msg</th>
		</tr><tr>
			<td>
         <div class="divCC">
          <span id="gvQAMsg_ctl02_Label7">This is wider text than his div container</span>
          </div>
          </td>
		</tr><tr>
			<td>
         <div class="divCC">
          <span id="gvQAMsg_ctl03_Label7">Text fit</span>
          </div>
          </td>
		</tr>
	</table>
</div>

CSS

.divCC 
{
   width:100px; white-space:nowrap; overflow:hidden;
}
.divCnt
{
  width: 100px; white-space: nowrap;
  overflow: hidden;
  box-sizing:border-box;
  animation:marquee 5s linear; /*infinite*/
}
@keyframes marquee 
{
  0%   { text-indent: 0px }
  100% { text-indent: -100px }
}

JavaScript

var pp = document.getElementById('gvQAMsg').getElementsByTagName('div');
            if (pp != null) {
                for (var i = 0; i < pp.length; i++) {
                    if (pp[i].className == 'divCC') {
                        var rr = pp[i].getElementsByTagName('span');
                        if (rr[0].offsetWidth > pp[i].clientWidth) {
                            pp[i].className = 'divCnt';
                        }
                    }
                }
            }