I am facing an issue with a <td> element nested inside a <p>. The problem arises when the text exceeds the maximum length, causing the overflow text to be printed on a new line from right to left.https://i.sstatic.net/lI3bm.png
How can I resolve this and ensure that the new line starts printing from right to left? Below is the code snippet in question:
.group {
border: 2px solid #FFCC00;
min-width: 250px;
width: 32.85%;
margin-bottom: 5px;
margin-left: 5px;
padding: 3px;
float: left;
}
.group article {
padding: 5px;
max-height: 350px;
overflow: auto;
}
.group article table {
width: 100%;
border-spacing: 7px;
}<div class="group">
<article>
<header> Links</header>
<hr/>
<section>
<table>
<tbody>
<tr>
<td>
<p><a href="example.com/" target="_blank">Click here</a></p>
</td>
<td>
<p>Description </p>
</td>
</tr>
</tbody>
</table>
</section>
</article>
</div>